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): error TS2307: Cannot find module './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 文件夹中找到它。