Webpack，Typescript和Angular2可以提前（AOT）编译吗？ [英] Webpack, Typescript and Angular2 with Ahead Of Time (AOT) compilation?

问题描述

最新版本的Angular2允许在app.bootstrap.ts文件中使用以下代码进行提前（AOT）编译：

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.

更新10/12/16 -我正常运行，请参见下面的答案。

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

推荐答案

我终于开始工作了，请参阅我的仓库 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 或 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编译。

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的AOT版本。 .ts -与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 。

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.

这篇关于Webpack，Typescript和Angular2可以提前（AOT）编译吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！