Angular 2
Kompilacja z wyprzedzeniem (AOT) z Angular 2

1. Zainstaluj zależności Angular 2 za pomocą kompilatora

UWAGA: aby uzyskać najlepsze wyniki, upewnij się, że projekt został utworzony za pomocą Angular-CLI.

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

Nie musisz wykonywać tego kroku, jeśli projekt ma już kąt 2 i wszystkie te zależności są zainstalowane. Upewnij się tylko, że compiler tam jest.

2. Dodaj plik `angularCompilerOptions` do pliku` tsconfig.json`

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

To jest folder wyjściowy kompilatora.

3. Uruchom ngc, kompilator kątowy

z katalogu głównego projektu ./node_modules/.bin/ngc -p src gdzie src to miejsce, w którym mieszka cały twój kod kątowy 2. Spowoduje to wygenerowanie folderu o nazwie ngfactory którym będzie cały Twój skompilowany kod.

"node_modules/.bin/ngc" -p src dla systemu Windows

4. Zmodyfikuj plik `main.ts`, aby używać przeglądarki NgFactory i platformy statycznej

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

W tym momencie powinieneś być w stanie uruchomić swój projekt. W tym przypadku mój projekt został utworzony za pomocą Angular-CLI.

> ng serve

Dlaczego potrzebujemy kompilacji, kompilacji przepływu zdarzeń i przykładu?

P: Dlaczego potrzebujemy kompilacji? Odp. Potrzebujemy kompilacji, aby osiągnąć wyższy poziom wydajności naszych aplikacji Angular.

Spójrz na następujący przykład:

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

Używając powyższego kodu do renderowania szablonu,

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

Jest znacznie wolniejszy w porównaniu do:

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

Przebieg wydarzeń dzięki kompilacji Ahead-of-Time

W przeciwieństwie do AoT wykonujemy następujące kroki:

1. Opracowanie aplikacji Angular 2 z TypeScript.
2. Kompilacja aplikacji za pomocą ngc.
3. Wykonuje kompilację szablonów za pomocą kompilatora Angular do TypeScript.
4. Kompilacja kodu TypeScript do JavaScript.
5. Sprzedaż wiązana
6. Minifikacja
7. Rozlokowanie.

Chociaż powyższy proces wydaje się nieco bardziej skomplikowany, użytkownik przechodzi tylko przez następujące kroki:

1. Pobierz wszystkie zasoby.
2. Kątowe bootstrapy.
3. Aplikacja zostanie zrenderowana.

Jak widać, brakuje trzeciego kroku, co oznacza szybsze / lepsze UX, a ponadto narzędzia takie jak angular2-seed i angular-cli dramatycznie zautomatyzują proces kompilacji.

Mam nadzieję, że może ci to pomóc! Dziękuję Ci!

Korzystanie z kompilacji AoT z Angular CLI

Interfejs wiersza polecenia Angular CLI obsługuje kompilację AoT od wersji beta 17.

Aby zbudować aplikację z kompilacją AoT, po prostu uruchom:

ng build --prod --aot