Angular 2
AOT-tid-sammanställning (AOT) med Angular 2

1. Installera Angular 2-beroenden med kompilatorn

OBS: för bästa resultat, se till att ditt projekt skapades med Angular-CLI.

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

Du behöver inte göra detta steg om projektet redan har vinkel 2 och alla dessa beroenden är installerade. Se bara till att compiler är där.

2. Lägg till `angularCompilerOptions` i filen` tsconfig.json`

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

Detta är utmatningsmappen för kompilatorn.

3. Kör ngc, vinkelkompilatorn

från roten till ditt projekt ./node_modules/.bin/ngc -p src där src är där all din kantiga 2-kod lever. Detta genererar en mapp som heter ngfactory där all din sammanställd kod kommer att leva.

"node_modules/.bin/ngc" -p src för windows

4. Ändra filen "main.ts" för att använda NgFactory och statisk plattformswebbläsare

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

Vid denna punkt bör du kunna köra ditt projekt. I detta fall skapades mitt projekt med hjälp av Angular-CLI.

> ng serve

Varför behöver vi sammanställning, sammanställning av flöde av händelser och exempel?

Fråga: Varför behöver vi sammanställning? Ans. Vi behöver sammanställning för att uppnå högre effektivitetsnivå för våra vinkelapplikationer.

Titta på följande exempel,

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

Använd koden ovan för att återge mallen,

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

Är mycket långsammare jämfört med:

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

Flöde av händelser med framtidens sammanställning

Däremot kommer vi med AoT igenom följande steg:

1. Utveckling av Angular 2-applikation med TypeScript.
2. Sammanställning av ansökan med ngc.
3. Utför sammanställning av mallarna med Angular-kompilatorn till TypeScript.
4. Sammanställning av TypeScript-koden till JavaScript.
5. Kombinationserbjudanden.
6. Minification.
7. Spridning.

Även om processen ovan verkar vara lite mer komplicerad går användaren endast genom stegen:

1. Ladda ner alla tillgångar.
2. Vinklade uppstängningsremmar.
3. Programmet återges.

Som du kan se det tredje steget saknas vilket innebär snabbare / bättre UX och ovanpå kommer verktyg som angular2-seed och angular-cli automatisera byggprocessen dramatiskt.

Jag hoppas att det kan hjälpa dig! Tack!

Använda AoT-kompilering med kantad CLI

Angular CLI- kommandoradsgränssnittet har AoT-kompilationsstöd sedan beta 17.

För att bygga din app med AoT-sammanställning, kör bara:

ng build --prod --aot