Angular 2
Компиляция вовремя (AOT) с помощью Angular 2

1. Установите зависимости Angular 2 с компилятором

ПРИМЕЧАНИЕ. Для достижения наилучших результатов убедитесь, что ваш проект был создан с помощью Angular-CLI.

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

Вам не нужно делать этот шаг, если у проекта уже есть угловой 2, и все эти зависимости установлены. Просто убедитесь, что compiler там.

2. Добавьте `angularCompilerOptions` в файл` tsconfig.json`

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

Это папка вывода компилятора.

3. Запустите ngc, угловой компилятор

из корня вашего проекта ./node_modules/.bin/ngc -p src где src - это место, где живет весь ваш угловой код 2. Это создаст папку с именем ngfactory которой будет ngfactory весь ваш скомпилированный код.

"node_modules/.bin/ngc" -p src для окон

4. Измените файл `main.ts` на использование браузера NgFactory и статической платформы.

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

На этом этапе вы сможете запустить свой проект. В этом случае мой проект был создан с использованием Angular-CLI.

> ng serve

Почему нам нужна компиляция, сборник событий и пример?

В. Почему нам нужна компиляция? Отв. Нам нужна компиляция для достижения более высокого уровня эффективности наших угловых применений.

Взгляните на следующий пример:

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

Используя приведенный выше код для визуализации шаблона,

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

Это намного медленнее по сравнению с:

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

Поток событий с компиляцией «Вперед»

Напротив, с AoT мы выполняем следующие шаги:

1. Разработка приложения Angular 2 с использованием TypeScript.
2. Компиляция приложения с ngc.
3. Выполняет компиляцию шаблонов с помощью Angular-компилятора для TypeScript.
4. Компиляция кода TypeScript для JavaScript.
5. Пакетирование.
6. Минификация.
7. Развертывание.

Хотя вышеописанный процесс кажется более сложным, пользователь идет только по шагам:

1. Загрузите все активы.
2. Угловые бутстрапы.
3. Приложение получает визуализацию.

Как вы видите, отсутствует третий шаг, что означает более быстрый / лучший UX, и помимо таких инструментов, как angular2-seed и angular-cli, автоматизируется процесс сборки.

Надеюсь, это поможет вам! Спасибо!

Использование компиляции AoT с Угловой CLI

Интерфейс командной строки « Угловая CLI» поддерживает AoT-компиляцию с момента выпуска бета-версии 17.

Чтобы создать приложение с помощью компиляции AoT, просто запустите:

ng build --prod --aot