Angular 2/4 - Вперед сборник, как

Я пытаюсь загрузить приложение Angular 2 RC5 после этого руководства https://angular.io/docs/ts/latest/guide/ngmodule.html Ниже мой код

import { AppModuleNgFactory } from './app.module.ngfactory';
import {platformBrowser} from "@angular/platform-browser";

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Однако, когда я попытался скомпилировать код typescript, я получил следующую ошибку

app\main.ts(1,36): ошибка TS2307: не удается найти модуль './app.module.ngfactory'.

Как я могу сгенерировать файл app.module.ngfactory? Какой инструмент я должен использовать?

Ответ 1

Оба компилятора JIT и AOT генерируют класс AppModuleNgFactory из того же исходного кода AppModule.

JIT-компилятор создает этот класс factory "на лету" в памяти в браузере. Компилятор AOT выводит factory в физический файл, который мы импортируем здесь, в статической версии main.ts

На высоком уровне @angular/compiler-cli предоставляет оболочку вокруг компилятора Typescript s tsc, и оба AoT компилируют ваш код приложения, а затем пересылают ваши приложения Typescript в Javascript:

$ ngc -p src

Это создает новый файл для каждого компонента и модуля (называемый NgFactory)

Чтобы запустить приложение в режиме AoT, все, что требуется, это изменение вашего файла main.ts из

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’
import {MyAppModule} from ‘./app’
platformBrowserDynamic().bootstrapModule(MyAppModule);

import {platformBrowser} from ‘@angular/platform-browser’
import {MyAppModuleNgFactory} from ‘./app.ngfactory’ //generated code
platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);

EDIT:

Чтобы использовать команду ngc, сначала установите их -

$ npm install @angular/compiler-cli [email protected] @angular/platform-server @angular/compiler

ngc является заменой для tsc, которую вы найдете в папке ./node_modules/.bin/ngc.

Ответ 2

2017 UPDATE

Начиная с Janurary 2017 При использовании angular-cli компиляция AOT теперь является методом компиляции по умолчанию при запуске следующую команду ng build --prod без каких-либо изменений кода.

Если вы хотите отключить AOT и вместо этого использовать JIT в процессе производства, вы можете использовать ng build --prod --no-aot.

Источник: https://github.com/angular/angular-cli/issues/4138

Это означает, что вы все еще можете использовать компиляцию JIT во время разработки (будет компилироваться быстрее так красиво) с помощью ng build и оставить ваш .ts следующим:

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app/app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

Подводя итог:

ng build                    // build with JIT
ng build --prod --no-aot    // build with JIT 
ng build --prod             // build with AOT