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

Question

我正在尝试按照本指南https://angular.io/docs/ts/latest/guide/ngmodule.html引导我的Angular 2 RC5应用程序. 下面是我的代码

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

但是,当我尝试编译打字稿代码时,我收到以下错误

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

这意味着您仍然可以在开发时使用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