Angular 2 / 4 / 5 - 提前编译的方法

Question

Angular 2 / 4 / 5 - 提前编译的方法

40

我正在尝试按照这篇指南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);

然而，当我尝试编译 TypeScript 代码时，遇到了以下错误：

app\main.ts(1,36): error TS2307: 找不到模块 './app.module.ngfactory'。

我该如何生成 app.module.ngfactory 文件？应该使用哪个工具？

- Toan Nguyen

对于一个最简单的解决方案，请查看 github.com/blacksonic/angular2-aot-webpack，另外还有一种使用 Webpack 插件的替代方法（无需修改入口点），请参考 github.com/blacksonic/angular2-aot-cli-webpack-plugin（内部使用 Angular CLI 插件）。 - VuesomeDev

2个回答

28

2017年更新

自2017年1月起，如果使用angular-cli，在运行以下命令时ng build --prod，无需更改代码要求，AOT编译现已成为默认的编译方法。

如果您想在生产中禁用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

- Zze

3

如何使用Webpack进行配置？ - Atieh

@Atieh 你指的是什么？ - Zze

@Zze 这是否意味着我们不必使用 Angular 文档中提到的这些步骤 https://angular.io/guide/aot-compiler#compile-with-aot 来实现 AOT？我找不到任何明确的说明。您能指导我详细了解吗？先感谢您！ - Ashwini Maddala

1

@AshwiniMaddala 我同意这有些冲突。你 不需要 编辑 .tsconfig 文件，因为 angular-cli 会自动处理这个过程。"AoT 编译是一种好的技术，已经作为 angular-seed 和 angular-cli 的一部分集成了" - http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/ - Zze

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sanket · Accepted Answer

即时编译器（JIT）和预编译器（AOT）都可以从同一个AppModule源代码生成一个AppModuleNgFactory类。

JIT编译器会在浏览器内存中实时创建该工厂类。AOT编译器会将该工厂输出到物理文件中，我们在静态版本的main.ts中导入它。

在高层次上，@angular/compiler-cli提供了一个包装TypeScript的tsc编译器的接口，并且AoT编译应用程序的代码并将其转换成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 文件夹中找到它。