Angular 2
Ahead-of-time (AOT) compilatie met Angular 2

1. Installeer Angular 2 afhankelijkheden met compiler

OPMERKING: zorg voor het beste resultaat dat uw project is gemaakt met Angular-CLI.

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

U hoeft deze stap niet te doen als u project al hoek 2 heeft en al deze afhankelijkheden zijn geïnstalleerd. Zorg er gewoon voor dat de compiler daar is.

2. Voeg `angularCompilerOptions` toe aan uw` tsconfig.json` bestand

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

Dit is de uitvoermap van de compiler.

3. Voer ngc uit, de hoekige compiler

vanuit de hoofdmap van uw project ./node_modules/.bin/ngc -p src waar src is waar al uw hoekige 2-code leeft. Dit genereert een map met de naam ngfactory waar al uw gecompileerde code zal leven.

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

4. Wijzig het bestand `main.ts` om NgFactory en de statische platformbrowser te gebruiken

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

Op dit punt zou u uw project moeten kunnen uitvoeren. In dit geval is mijn project gemaakt met behulp van de Angular-CLI.

> ng serve

Waarom hebben we compilatie, stroom van evenementen en voorbeeld nodig?

V. Waarom hebben we compilatie nodig? Ans. We hebben compilatie nodig om een hoger niveau van efficiëntie van onze hoektoepassingen te bereiken.

Bekijk het volgende voorbeeld,

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

Gebruik de bovenstaande code om de sjabloon weer te geven,

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

Is veel langzamer in vergelijking met:

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

Stroom van evenementen met Ahead-of-Time Compilatie

Met AoT daarentegen doorlopen we de volgende stappen:

1. Ontwikkeling van Angular 2-toepassing met TypeScript.
2. Compilatie van de applicatie met ngc.
3. Voert compilatie van de sjablonen uit met de Angular-compiler naar TypeScript.
4. Compilatie van de TypeScript-code naar JavaScript.
5. Bundeling.
6. Minification.
7. Deployment.

Hoewel het bovenstaande proces enigszins gecompliceerder lijkt, gaat de gebruiker alleen door de stappen:

1. Download alle middelen.
2. Hoekige bootstraps.
3. De applicatie wordt gerenderd.

Zoals je kunt zien ontbreekt de derde stap, wat een snellere / betere UX betekent en bovendien zullen tools zoals angular2-seed en angular-cli het bouwproces dramatisch automatiseren.

Ik hoop dat het je kan helpen! Dank je!

AoT-compilatie gebruiken met hoekige CLI

De Angular CLI- opdrachtregelinterface biedt sinds bèta 17 ondersteuning voor AoT-compilatie.

Om uw app met AoT-compilatie te bouwen, voert u eenvoudig uit:

ng build --prod --aot