angular - Webpack，Typescript和Angular2可以提前(AOT)编译吗？

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

// 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 Official Documentation
如何将webpack和typescript加载程序与angular2的aot编译器集成？
似乎还没有这样做的选择，但我问的是堆栈溢出问题，所以当它可用时，答案很容易找到。
更新10/12/16-我已经开始工作了，请看下面的答案。

最佳答案

我终于成功了，看看我的回购协议Angular2 Webpack2 DotNET Starter
有几个技巧是必要的。注意，AOT编译不支持Angular2组件中的任何require()语句。它们将需要转换为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
   }
}

你还需要准确的安格拉2的版本组合。@angular/[email protected]和@angular/[email protected]对我不起作用，我必须对两者都使用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脚本来完成
包装袋

   "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），但在开发模式中，它使用带webpack-dev-server（app.bootstrap.ts）的jit。
最后，首先运行npm run compile:aot。
一旦aot文件输出到磁盘，就可以使用webpack或webpack-dev-server运行webpack构建。
有关工作示例，请参见我的repoAngular2 Webpack2 DotNET Starter。它与.NET Core1.0集成，但对于那些不使用.NET的用户，您仍然可以看到Webpack2和Angular2是如何配置的。

关于angular - Webpack，Typescript和Angular2可以提前(AOT)编译吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39111198/