Instalacion de Entorno Angular

angular

Entorno

Es necesario que instales las siguientes herramientas, en este orden:

      npm install -g @angular/cli

Editor de Texto

Visual Studio Code

Los plugins del Visual Studio Code que te recomendamos al 2023 son los que ya instalaste para trabajar con HTML/CSS y los siguientes:

Necesarios

Si tenés instalada la extensión Prettier - Code formatter (Prettier) te recomendamos desinstalarla y reemplazarla por Prettier ESLint (Rebecca Vest): es el plugin que vamos a utilizar para aplicar el formato y ejecutar el proceso linter con la sintaxis de la cursada, que define:

Más abajo te indicamos los dos archivos que definen esta configuración: .eslintrc.json y .prettierrc.json.

Opcionales

Alternativa a Visual Studio Code

Otra opción es utilizar Web Storm (de la suite de IntelliJ), si tienen una cuenta de la facultad pueden solicitar una licencia educativa. Solo que como no vamos a aprovechar todas las herramientas de este IDE poderoso quizás convenga ir por el Visual Studio Code.

Aprendiendo Typescript

Typescript es el lenguaje de programación base para Angular. Tranquilo, es muy similar a los lenguajes orientados a objetos en los que ya trabajaste. Para iniciarte o para hacer consultas te dejamos estos links:

Crear un proyecto Angular desde cero

En la consola Git Bash o bien desde una terminal de Linux hacemos

      ng new nombre-de-tu-app
cd nombre-de-tu-app
ng serve -open  # o bien, la versión corta es ng s -o

Correr los tests de un proyecto

Para ejecutar los tests de un proyecto, te posicionás en el directorio raíz y ejecutás desde la consola

      ng test

Archivo de configuración para Visual Studio Code

Te recomendamos que dentro del proyecto crees una carpeta .vscode y dentro un archivo settings.json que tenga este contenido:

      {
    "[javascript]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
      "editor.formatOnPaste": false, // required 
      "editor.formatOnType": false, // required
      "editor.formatOnSave": true, // optional 
      "editor.formatOnSaveMode": "file", // required to format on save
    },
    "[typescript]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
      "editor.formatOnPaste": false, // required 
      "editor.formatOnType": false, // required
      "editor.formatOnSave": true, // optional 
      "editor.formatOnSaveMode": "file", // required to format on save
    },
    "[json]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
      "editor.formatOnPaste": false, // required 
      "editor.formatOnType": false, // required
      "editor.formatOnSave": true, // optional 
      "editor.formatOnSaveMode": "file", // required to format on save
    },
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
}

Cambios al package.json

Dentro del archivo package.json del raíz de tu proyecto debés tener estos scripts:

        "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "eslint \"**/*.{ts,tsx}\" ",
    "lint:fix": "eslint --fix \"**/*.{ts,tsx}\" ",
    "build:prod": "ng build --prod",
    "test:prod": "ng test --browsers=ChromeHeadless --watch=false --code-coverage"
  },

Agregando Dependencias

Instalaremos algunas dependencias adicionales:

      # Installar ESLint
npm install --save-dev eslint @typescript-eslint/parser

# Instalar plugins adicionales
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier

# Instalar Prettier y sus dependencias
npm install --save-dev prettier prettier-eslint eslint-config-prettier

Archivo .nvmrc

Tener un archivo .nvmrc es conveniente si todo el equipo trabaja con NVM (el versionador de Node). El contenido especifica qué versión de Node vamos a utilizar:

      20.4.0

Ejemplo de .gitignore

Te recomendamos que configures tu archivo .gitignore de la siguiente manera:

      # See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules

# profiling files
chrome-profiler-events*.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db

# Angular cache
.angular

Configuración del linter

El linter es el proceso que genera advertencias o errores en base a la sintaxis y semántica de nuestros componentes. Lo interesante es que podemos configurar, por ejemplo, que escribir console.log o debugger no es código que queremos que esté en el ambiente productivo, pero sí podríamos admitirlo en desarrollo. También se puede configurar validaciones como el uso de let en lugar de const, variables sin utilizar, etc. Te dejamos la configuración recomendada en el archivo .eslintrc.json que debe estar en el directorio raíz:

      {
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "rules": {
    "semi": [
      2,
      "never"
    ],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": ["off"],
    "@typescript-eslint/no-var-requires": "off"
  }
}

Para ejecutar el linter desde la línea de comandos, podés escribir

      npm run lint

con el archivo package.json que contenga los scripts que arriba te dejamos. Es importante hacerlo ya que el CI de Github Actions lo va a ejecutar para pasar el build, para arreglar automáticamente todos los problemas que detecta el linter podés hacer

      npm run lint:fix

Configuración del archivo de test

Al archivo karma.conf.js que está en el directorio raíz hay que agregarle la opción para que genere el porcentaje de cobertura en formato json también:

          coverageReporter: {
      dir: require('path').join(__dirname, './coverage/eg-conversor-angular'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }, // <-- agregar una coma al final
        { type: 'json-summary' }  // <-- agregar esta línea
      ]
    },

Si no tenés un archivo karma.conf.js lo podés generar desde el Angular CLI: ng generate config karma

Otros archivos útiles

En la carpeta raíz creá los siguientes archivos

      {
    "tagname-lowercase": false,
    "attr-lowercase": false,
    "attr-value-double-quotes": true,
    "doctype-first": false,
    "tag-pair": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "attr-no-duplication": true,
    "title-require": true
}

    
      {
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto",
  "tabWidth": 2,
  "semi": false
}

Ajustes para el % de cobertura

Para tener información más precisa sobre el porcentaje de cobertura de tus tests, en el archivo app.component.spec.ts de tu directorio src/app tenés que agregar este import:

      import './app.module'

Ejemplo de un archivo para Github Actions

Para agregar el coverage tenés que reemplazar XXXXXXXXX por el nombre de la carpeta donde está tu proyecto.

Te dejamos este archivo de ejemplo que tenés que guardar en .github/workflows/build.yml. Descargalo y reemplazá XXXXXXXXX por el nombre de la carpeta donde está tu proyecto.

Cómo configurar los badges en tu README

      ![Coverage](./badges/XXXXXXX/coverage.svg)