Angular 2 / 4 / 5 - 提前编译如何

Question

我正在尝试按照本指南引导我的 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 文件？我应该使用哪个工具？

Answer 1

JIT 和 AOT 编译器都从相同的 AppModule 源代码生成 AppModuleNgFactory 类。

JIT 编译器在内存中和浏览器中动态创建该工厂类。 AOT 编译器将工厂输出到一个物理文件中，我们在此处以静态版本的 main.ts 导入该文件

在高层次上，@angular/compiler-cli 提供了一个围绕 Typescript 的 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);

---

编辑：

要使用ngc命令，首先安装这些-

$ npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler

ngc 是tsc 的直接替代品，您可以在./node_modules/.bin/ngc 文件夹中找到它。

Answer 2

2017 年更新

截至 2017 年 1 月 如果使用 angular-cli，AOT 编译现在是运行以下命令 ng build --prod 时的默认编译方法，无需更改代码。

如果您想禁用 AOT 而在生产中使用 JIT，那么您可以使用 ng build --prod --no-aot。

来源：https://github.com/angular/angular-cli/issues/4138

---

这意味着您仍然可以在使用 ng build 进行开发时使用 JIT 编译（编译速度更快，非常方便），并将您的 .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