Angular 2
Compilazione A prima del tempo (AOT) con Angular 2

1. Installare le dipendenze Angular 2 con il compilatore

NOTA: per ottenere risultati ottimali, assicurarsi che il progetto sia stato creato utilizzando Angular-CLI.

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

Non è necessario eseguire questo passaggio se si progetta già con angular 2 e tutte queste dipendenze installate. Assicurati che il compiler sia lì.

2. Aggiungi `angularCompilerOptions` al tuo file` tsconfig.json`

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

Questa è la cartella di output del compilatore.

3. Eseguire ngc, il compilatore angolare

dalla radice del tuo progetto ./node_modules/.bin/ngc -p src dove src è dove risiede tutto il tuo codice angolare 2. Questo genererà una cartella chiamata ngfactory dove tutto il tuo codice compilato vivrà.

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

4. Modificare il file `main.ts` per utilizzare NgFactory e il browser della piattaforma statica

// 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);

A questo punto dovresti essere in grado di eseguire il tuo progetto. In questo caso, il mio progetto è stato creato utilizzando la Angular-CLI.

> ng serve

Perché abbiamo bisogno di compilazione, compilazione degli eventi Flow ed esempi?

D. Perché abbiamo bisogno della compilazione? Ans. Abbiamo bisogno di una compilazione per raggiungere un più alto livello di efficienza delle nostre applicazioni Angular.

Dai un'occhiata al seguente esempio,

// ...
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 il codice sopra per rendere il modello,

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

È molto più lento rispetto a:

// ...
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);
// ...

Flusso di eventi con la compilazione anticipata

Al contrario, con AoT otteniamo i seguenti passaggi:

1. Sviluppo dell'applicazione Angular 2 con TypeScript.
2. Compilazione dell'applicazione con ngc.
3. Esegue la compilazione dei modelli con il compilatore angolare su TypeScript.
4. Compilazione del codice TypeScript in JavaScript.
5. Bundling.
6. Minification.
7. Distribuzione.

Sebbene il processo di cui sopra sembra leggermente più complicato, l'utente passa solo attraverso i passaggi:

1. Scarica tutte le risorse.
2. Bootstrap angolari.
3. L'applicazione viene renderizzata.

Come puoi vedere, manca il terzo passo, che significa UX più veloce / migliore e oltre a strumenti come angular2-seed e angular-cli automatizzerà il processo di costruzione in modo drammatico.

Spero possa aiutarti! Grazie!

Utilizzo della compilazione AoT con CLI angolare

L'interfaccia della riga di comando CLI di Angular ha il supporto alla compilazione AoT dalla versione beta 17.

Per costruire la tua app con la compilazione AoT, esegui semplicemente:

ng build --prod --aot