Compilación

Existen 2 métodos

JIT

Just In Time

AOT

Ahead Of Time

Código final

Computadora del cliente.

Aquí se compila el código final y es el usuario quien ve los errores.

Código final

Compilado antes de enviar al usuario

Computadora del cliente.

Hasta la versión 2 de Angular el método por defecto era el JIT. Luego el método por defecto es AOT.

 

Para compilar el código se usará el siguiente comando:

ng build --prod

Este comando creará una carpeta llamada "dist" en la raíz del proyecto.

Los archivos de esta carpeta pasarán a producción.

Si los archivos compilados estarán en la raíz de un sitio web como por ejemplo: "http://midominio.com", no habrá que hacer ningún cambio.

 

En caso no estén en la raíz, sino en, por ejemplo, "http://midominio.com/extranet", se deberá modificar la etiqueta "base" del archivo "index.html"

Si estuviese en una subcarpeta dentro de una carpeta, se debe especificar la ruta en la etiqueta "base".

Entornos

Supongamos que tenemos los entornos: dev, qa y prod.

 

Dentro de la carpeta "environments" podemos tener los siguientes archivos:

 

- environment.ts (dev)

- environment.qa.ts (qa)

- environment.prod.ts (prod)

 

Cada uno de ellos guardará los parámetros y valores necesarios para el entorno o ambiente en el que se encuentren trabajando.

Supongamos que en "environment.ts" colocamos la ruta base de los endpoints (Api REST)

<!-- environment.ts -->

export const environment = {
  production: false,
  rutaAPI: "http://localhost:3000"
};

En un servicio podríamos invocar la ruta importando el entorno.

<!-- usuario.service.ts -->

import { enviroment } from "./environment/environment"

...
export class UsuarioService {
    ruta: string = `${environment.rutaAPI}/usuario`
    ...
}

Cuando se ejecuta el comando: "ng build --prod".

 

Internamente Angular cambia la referencia "./environment/environment" a

"./environment/environment.prod"

Desde la versión 6 de Angular, se pueden usar los siguientes comandos:

 

- ng build --configuration=dev

- ng build --configuration=qa

- ng build --configuration=production

Hay que indicar cómo se hará el reemplazo. Para ello hay que editar el archivo "angular.json"

"configurations": {
  "production": { ... },
  "qa": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.qa.ts"
      }
    ]
  }
}

Assets

Si tienen archivos estáticos como imágenes, videos, pdfs, etc., los pueden almacenar en la carpeta "assets" y vincularlos desde cualquier componente o directiva.

 

Cuando se compila, la carpeta "assets" es agregada al código compilado en la carpeta "dist".

Polyfills

Angular no funciona bien en Internet Explorer 9, 10 y 11. Básicamente porque el ES2015 (ES6) no está completamente soportado por Internet Explorer.

Para solucionar el problema, hay que descomentar los siguientes polyfills en el archivo "polyfills.ts".

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/array';
import 'core-js/es6/date';
import 'core-js/es6/function';
import 'core-js/es6/map';
import 'core-js/es6/math';
import 'core-js/es6/number';
import 'core-js/es6/object';
import 'core-js/es6/parse-float';
import 'core-js/es6/parse-int';
import 'core-js/es6/regexp';
import 'core-js/es6/set';
import 'core-js/es6/string';
import 'core-js/es6/symbol';
import 'core-js/es6/weak-map';

14 Angular: Despliegue

By Sergio Hidalgo

Made with Slides.com

14 Angular: Despliegue

Para desplegar un proyecto hay que tener algunas consideraciones.

  • 682

More from Sergio Hidalgo