使用 Ahead Of Time (AOT) 编译的 Webpack、Typescript 和 Angular2? [英] Webpack, Typescript and Angular2 with Ahead Of Time (AOT) compilation?

问题描述

最新版本的 Angular2 允许提前 (AOT) 编译，在您的 app.bootstrap.ts 文件中使用以下代码:

The latest release of Angular2 allows for Ahead of time (AOT) compilation, using this code in your app.bootstrap.ts file:

// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';

// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Angular2 官方文档

我们如何将 Webpack 和 Typescript 加载器与 Angular2 的 AOT 编译器集成?

How can we integrate Webpack and Typescript loaders with Angular2's AOT compiler?

似乎还没有这样做的选项，但我问的是关于堆栈溢出的问题，所以当它可用时，可以很容易地找到答案.

It seems there might not be an option to do so yet, but I'm asking the question on Stack overflow so when it is available, the answer can be easily found.

UPDATE 10/12/16 - 我让它工作了，请参阅下面的答案.

UPDATE 10/12/16 - I got it working, see my answer below.

推荐答案

我终于成功了，请参阅我的 repo Angular2 Webpack2 DotNET Starter

I got it working finally, see my repo Angular2 Webpack2 DotNET Starter

有几个技巧是必要的.请注意，AOT 编译不支持 Angular 2 组件中的任何 require() 语句.它们需要转换为 import 语句.

There are several tricks necessary. Note that AOT compilation does not support any require() statements in your Angular 2 components. They will need to be converted to import statements.

首先，您需要有第二个 tsconfig.json 文件，其中包含用于 AOT 编译的特殊选项.我用 .aot.json 扩展名来指定它.

First, you need to have a second tsconfig.json file, with special options for AOT compilation. I designate this with .aot.json extension.

tsconfig.aot.json :

{
   "compilerOptions": {
      "target": "es5",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "allowSyntheticDefaultImports": false,
      "noEmitHelpers": true,
      "pretty": true,
      "strictNullChecks": false,
      "baseUrl": ".",
      "sourceMap": true,
      "sourceRoot": ".",
      "lib": [
         "es6",
         "dom"
      ],
      "types": [
         "lodash",
         "hammerjs",
         "jasmine",
         "node",
         "selenium-webdriver",
         "source-map",
         "uglify-js",
         "webpack",
         "materialize-css",
         "jquery",
         "kendo-ui"
      ],
      "typeRoots": [
         "./node_modules/@types"
      ],
      "outDir": "./compiled/src"
   },
   "exclude": [
      "./node_modules",
      "./**/*.e2e.ts",
      "./**/*.spec.ts",
   ],
   "awesomeTypescriptLoaderOptions": {
      "useWebpackText": true,
      "forkChecker": true,
      "useCache": true
   },
   "compileOnSave": false,
   "buildOnSave": false,
   "atom": {
      "rewriteTsconfig": false
   },
   "angularCompilerOptions": {
      "genDir": "./compiled/aot",
      "debug": true
   }
}

您还需要 Angular2 版本的正确组合.@angular/core@2.0.2 和 @angular/common@2.0.2 对我不起作用，我不得不使用 2.0.0> for both 或 ngc 未能编译 AOT 文件.这是我成功使用的内容:

You'll also need the exact right combination of verions of Angular2. @angular/core@2.0.2 and @angular/common@2.0.2 did NOT work for me, I had to use 2.0.0 for both or ngc failed to compile the AOT files. Here's what I'm using successfully:

package.json :

  "dependencies": {
    "@angular/core": "2.0.0",
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/forms": "^2.0.1",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/tsc-wrapped": "0.3.0"
}

此外，您还需要几个漂亮的 webpack 加载器，同时还允许 webpack 查看 ./src 文件夹以及您的 AOT 编译文件输出到的文件夹.(*.component.ngfactory.ts)

In addition, you'll need a couple nifty webpack loaders, while also allowing webpack to look in the ./src folder as well as the folder your AOT compiled files are output to. (*.component.ngfactory.ts)

最后一部分非常重要！如果您不告诉 webpack 将这些文件夹包含在内，它将无法工作.本例中，AOT文件输出到根目录下的/aot-compiled.

That last part is very important! If you don't tell webpack to include it those folders, it won't work. In this example, the AOT files are output to /aot-compiled in the root folder.

webpack.common.js

  loaders: [
     {
        test: /\.ts$/,
        include: [helpers.paths.appRoot, helpers.root('./compiled/aot')],
        exclude: [/\.(spec|e2e)\.ts$/],
        loaders: [
           '@angularclass/hmr-loader',
           'awesome-typescript-loader',
           'angular2-template-loader',
           'angular2-router-loader?loader=system',
           "angular2-load-children-loader" // this loader replaces loadChildren value to work with AOT/JIT
        ],
     },
  ]

要生成您的 AOT 文件，您需要一个 NPM 脚本来为您完成

To generate your AOT files, you'll need an NPM script to do it for you

package.json

   "scripts": {
      "compile:aot": "./node_modules/.bin/ngc -p ./tsconfig.aot.json",
   }

您还需要让您的 webpack 配置读取 app.bootstrap.ts 的 AOT 版本 - 这与 JIT 版本不同.我用 .aot.ts 扩展来区分它，以便在生产中，webpack 使用 AOT(app.bootstrap.aot.ts)，但在开发模式下，它使用 JIT 和webpack-dev-server (app.bootstrap.ts).

You'll also need to make your webpack config read the AOT version of app.bootstrap.ts - which is different from the JIT version. I differentiate it with .aot.ts extension so that in production, webpack uses AOT (app.bootstrap.aot.ts), but in dev mode, it uses JIT with webpack-dev-server (app.bootstrap.ts).

最后，您首先运行 npm run compile:aot.一旦你的 AOT 文件输出到磁盘，你就可以使用 webpack 或 webpack-dev-server 运行你的 webpack 构建.

Finally, you run npm run compile:aot FIRST. Once your AOT files are output to disk, you run your webpack build with either webpack or webpack-dev-server.

有关工作示例，请参阅我的存储库 Angular2 Webpack2 DotNET Starter.它与 .NET Core 1.0 集成，但对于那些不使用 .NET 的人，您仍然可以看到如何配置 Webpack 2 和 Angular 2.

For a working example, see my repo Angular2 Webpack2 DotNET Starter. It's integrated with .NET Core 1.0, but for those not using .NET, you can still see how Webpack 2 and Angular 2 are configured.

这篇关于使用 Ahead Of Time (AOT) 编译的 Webpack、Typescript 和 Angular2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！