Angular 4 AOT 编译器

Question

我想为我的应用程序设置 AOT 编译器

当我运行 node_modules/.bin/ngc -p tsconfig-aot.json 它编译成功并且没有给出错误。

但是当我尝试运行 ng serve 它给了我这个错误：

试图找到 bootstrap 代码，但找不到。指定静态可分析的 bootstrap 代码或将 entryModule 传递给插件选项。

Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
    at Object.resolveEntryModuleFromMain (/path/node_modules/@ngtools/webpack/src/entry_resolver.js:128:11)
    at AotPlugin._setupOptions (/path/node_modules/@ngtools/webpack/src/plugin.js:143:50)
    at new AotPlugin (/path/node_modules/@ngtools/webpack/src/plugin.js:26:14)
    at _createAotPlugin (/path/node_modules/@angular/cli/models/webpack-configs/typescript.js:55:12)
    at Object.exports.getNonAotConfig (/path/node_modules/@angular/cli/models/webpack-configs/typescript.js:70:19)
    at NgCliWebpackConfig.buildConfig (/path/node_modules/@angular/cli/models/webpack-config.js:27:37)
    at Class.run (/path/node_modules/@angular/cli/tasks/serve.js:38:98)
    at check_port_1.checkPort.then.port (/path/node_modules/@angular/cli/commands/serve.js:110:26)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

main.ts

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

console.log('Running AOT compiled');
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Answer 1

node_modules/.bin/ngc -p tsconfig-aot.json 将所有文件编译到输出文件夹中。您可以使用任何 http 服务器访问该文件夹中的运行文件。

然而，在使用 angular-cli 进行开发时，通常不会这样做。 ng serve 使用自己的开发服务器，不关心 output 文件夹。如 official docs 中所述：

ng serve builds the application and starts a web server.

... below are the additional options.

-- aot

所以你需要使用--aot选项：

ng serve --aot

而且您不需要修改 main.ts 文件。它应该有 boostrapModule 而不是 boostrapModuleFactory 方法。

Angular 4 AOT 编译器

Angular 4 AOT Compiler

aot

angular2-aot

angular