Angular 2
AOT-Compilierung mit Angular 2

1. Installieren Sie die Abhängigkeiten von Angular 2 mit dem Compiler

HINWEIS: Um optimale Ergebnisse zu erzielen, stellen Sie sicher, dass Ihr Projekt mit der Angular-CLI erstellt wurde.

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

Sie müssen diesen Schritt nicht ausführen, wenn in Ihrem Projekt bereits Winkel 2 und alle diese Abhängigkeiten installiert sind. Stellen Sie einfach sicher, dass sich der compiler dort befindet.

2. Fügen Sie der Datei "tsconfig.json" die Option "angleCompilerOptions" hinzu

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

Dies ist der Ausgabeordner des Compilers.

3. Führen Sie den Winkelcompiler ngc aus

Von der Wurzel Ihres Projekts ./node_modules/.bin/ngc -p src wo src gesamte ./node_modules/.bin/ngc -p src 2 ist. Dadurch wird ein Ordner namens ngfactory in dem der gesamte kompilierte Code ngfactory wird.

"node_modules/.bin/ngc" -p src für Windows

4. Ändern Sie die Datei "main.ts", um den Browser NgFactory und die statische Plattform zu verwenden

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

An diesem Punkt sollten Sie in der Lage sein, Ihr Projekt auszuführen. In diesem Fall wurde mein Projekt mit der Angular-CLI erstellt.

> ng serve

Warum brauchen wir Zusammenstellung, Zusammenstellung von Ereignissen und Beispiel?

Warum brauchen wir eine Kompilierung? Ans. Wir benötigen eine Zusammenstellung, um eine höhere Effizienz unserer Angular-Anwendungen zu erreichen.

Schauen Sie sich das folgende Beispiel an:

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

Verwenden Sie den obigen Code, um die Vorlage zu rendern.

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

Ist viel langsamer im Vergleich zu:

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

Ablauf von Ereignissen mit Vorausberechnung

Im Gegensatz dazu werden mit AoT die folgenden Schritte durchlaufen:

1. Entwicklung der Angular 2-Anwendung mit TypeScript.
2. Erstellung der Anwendung mit ngc.
3. Führt die Kompilierung der Vorlagen mit dem Angular-Compiler zu TypeScript durch.
4. Kompilierung des TypeScript-Codes in JavaScript.
5. Bündeln
6. Minifizierung
7. Einsatz.

Obwohl der obige Vorgang etwas komplizierter erscheint, führt der Benutzer nur die folgenden Schritte durch:

1. Laden Sie alle Assets herunter.
2. Angular Bootstraps.
3. Die Anwendung wird gerendert.

Wie Sie sehen, fehlt der dritte Schritt, was eine schnellere / bessere UX bedeutet. Außerdem werden Tools wie angle2-seed und angle-cli den Build-Prozess erheblich automatisieren.

Ich hoffe es könnte dir helfen! Vielen Dank!

AoT-Kompilierung mit Angular CLI verwenden

Die Angular CLI- Befehlszeilenschnittstelle unterstützt seit der Beta 17 AoT-Kompilierung.

Um Ihre App mit AoT-Kompilierung zu erstellen, führen Sie einfach Folgendes aus:

ng build --prod --aot