Webpack,Typescript和Angular2具有提前(AOT)编译？

Question

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

// 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编译器集成？

似乎可能还没有选择这样做,但我问的是关于Stack溢出的问题,所以当它可用时,答案很容易找到.

更新10/12/16 - 我得到了它的工作,请看下面我的答案.

Answer 1

我终于完成了它,看到我的回购Angular2 Webpack2 DotNET Starter

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

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

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文件.这就是我成功使用的内容:

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)

最后一部分非常重要!如果你不告诉webpack将它包含在那些文件夹中,它将无法正常工作.在此示例中,AOT文件输出到/aot-compiled根文件夹中.

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脚本来为您完成

的package.json

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

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

最后,你运行npm run compile:aotFIRST.将AOT文件输出到磁盘后,使用webpack或运行webpack构建webpack-dev-server.

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