Angular 2
Compilation AOT avec Angular 2

1. Installez les dépendances Angular 2 avec le compilateur

REMARQUE: pour de meilleurs résultats, assurez-vous que votre projet a été créé à l'aide de l'angulaire CLI.

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

Vous n'avez pas à faire cette étape si votre projet a déjà un angle 2 et toutes ces dépendances installées. Assurez-vous simplement que le compiler est bien là.

2. Ajoutez `angularCompilerOptions` à votre fichier` tsconfig.json`

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

C'est le dossier de sortie du compilateur.

3. Exécutez ngc, le compilateur angulaire

de la racine de votre projet ./node_modules/.bin/ngc -p src où src est l'endroit où tous vos codes angulaires 2 vivent. Cela va générer un dossier appelé ngfactory où tout votre code compilé va vivre.

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

4. Modifiez le fichier `main.ts` pour utiliser NgFactory et le navigateur de plate-forme statique

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

À ce stade, vous devriez pouvoir exécuter votre projet. Dans ce cas, mon projet a été créé à l'aide de l'angulaire-CLI.

> ng serve

Pourquoi avons-nous besoin d'une compilation, d'une compilation de flux d'événements et d'un exemple?

Q. Pourquoi avons-nous besoin d'une compilation? Ans. Nous avons besoin d'une compilation pour atteindre un niveau d'efficacité plus élevé de nos applications angulaires.

Regardez l'exemple suivant,

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

En utilisant le code ci-dessus pour rendre le modèle,

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

Est beaucoup plus lent par rapport à:

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

Flux d'événements avec une compilation en avance

En revanche, avec AoT, nous passons par les étapes suivantes:

1. Développement de l'application Angular 2 avec TypeScript.
2. Compilation de l'application avec ngc.
3. Effectue la compilation des modèles avec le compilateur Angular en TypeScript.
4. Compilation du code TypeScript en JavaScript.
5. Bundling
6. Minification.
7. Déploiement.

Bien que le processus ci-dessus semble légèrement plus compliqué, l'utilisateur passe par les étapes suivantes:

1. Téléchargez tous les actifs.
2. Cordons angulaires.
3. L'application est rendue.

Comme vous pouvez le constater, la troisième étape est manquante, ce qui signifie que l’UX est plus rapide / meilleur et que des outils tels que angular2-seed et angular-cli automatiseront considérablement le processus de construction.

J'espère que cela pourrait vous aider! Je vous remercie!

Utilisation de la compilation AoT avec la CLI angulaire

L' interface de ligne de commande Angular CLI prend en charge la compilation AoT depuis la version bêta 17.

Pour créer votre application avec la compilation AoT, exécutez simplement:

ng build --prod --aot