Angular 2
Compilación anticipada (AOT) con Angular 2

1. Instalar dependencias de Angular 2 con compilador.

NOTA: para obtener los mejores resultados, asegúrese de que su proyecto se haya creado utilizando Angular-CLI.

npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server}

No tiene que realizar este paso si el proyecto ya tiene angular 2 y todas estas dependencias instaladas. Sólo asegúrese de que el compiler está allí.

2. Agregue `angularCompilerOptions` a su archivo` tsconfig.json`

...
"angularCompilerOptions": {
    "genDir": "./ngfactory"
}
...

Esta es la carpeta de salida del compilador.

3. Ejecuta ngc, el compilador angular

desde la raíz de su proyecto ./node_modules/.bin/ngc -p src donde src es donde vive todo su código angular 2. Esto generará una carpeta llamada ngfactory donde ngfactory todo el código compilado.

"node_modules/.bin/ngc" -p src para windows

4. Modifique el archivo `main.ts` para usar NgFactory y el navegador de plataforma estático

// this is the static platform browser, the usual counterpart is @angular/platform-browser-dynamic.
import { platformBrowser } from '@angular/platform-browser';

// this is generated by the angular compiler
import { AppModuleNgFactory } from './ngfactory/app/app.module.ngfactory';

// note the use of `bootstrapModuleFactory`, as opposed to `bootstrapModule`.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

En este punto deberías poder ejecutar tu proyecto. En este caso, mi proyecto se creó utilizando Angular-CLI.

> ng serve

¿Por qué necesitamos compilación, compilación de flujo de eventos y ejemplo?

P. ¿Por qué necesitamos compilación? Respuesta Necesitamos una compilación para lograr un mayor nivel de eficiencia de nuestras aplicaciones Angulares.

Echa un vistazo al siguiente ejemplo,

// ...
compile: function (el, scope) {
  var dirs = this._getElDirectives(el);
  var dir;
  var scopeCreated;
  dirs.forEach(function (d) {
    dir = Provider.get(d.name + Provider.DIRECTIVES_SUFFIX);
    if (dir.scope && !scopeCreated) {
      scope = scope.$new();
      scopeCreated = true;
    }
    dir.link(el, scope, d.value);
  });
  Array.prototype.slice.call(el.children).forEach(function (c) {
    this.compile(c, scope);
  }, this);
},
// ...

Usando el código de arriba para renderizar la plantilla,

<ul>
  <li *ngFor="let name of names"></li>
</ul>

Es mucho más lento en comparación con:

// ...
this._text_9 = this.renderer.createText(this._el_3, '\n', null);
this._text_10 = this.renderer.createText(parentRenderNode, '\n\n', null);
this._el_11 = this.renderer.createElement(parentRenderNode, 'ul', null);
this._text_12 = this.renderer.createText(this._el_11, '\n  ', null);
this._anchor_13 = this.renderer.createTemplateAnchor(this._el_11, null);
this._appEl_13 = new import2.AppElement(13, 11, this, this._anchor_13);
this._TemplateRef_13_5 = new import17.TemplateRef_(this._appEl_13, viewFactory_HomeComponent1);
this._NgFor_13_6 = new import15.NgFor(this._appEl_13.vcRef, this._TemplateRef_13_5, this.parentInjector.get(import18.IterableDiffers), this.ref);
// ...

Flujo de eventos con compilación anticipada de tiempo

En contraste, con AoT pasamos por los siguientes pasos:

1. Desarrollo de la aplicación Angular 2 con TypeScript.
2. Recopilación de la aplicación con ngc.
3. Realiza la compilación de las plantillas con el compilador Angular para TypeScript.
4. Recopilación del código de TypeScript a JavaScript.
5. Liar
6. Minificación.
7. Despliegue.

Aunque el proceso anterior parece un poco más complicado, el usuario solo sigue los pasos:

1. Descarga todos los activos.
2. Bootstraps angulares.
3. La aplicación se renderiza.

Como puede ver, falta el tercer paso, lo que significa que UX más rápido / mejor, y además de herramientas como angular2-seed y angle-cli, automatizará dramáticamente el proceso de construcción.

Espero que te pueda ayudar! ¡Gracias!

Uso de la compilación de AoT con CLI angular

La interfaz de línea de comandos de Angular CLI tiene soporte de compilación de AoT desde la versión beta 17.

Para construir su aplicación con compilación AoT, simplemente ejecute:

ng build --prod --aot