Angular 4 AOT with webpack

Question

我正在将 angular 4 与 webpack 2 一起使用并尝试使用 AOT，但它给了我这个错误：10% building modules 4/5 modules 1 active ..._modules/intl/locale-data/jsonp/en.jsModuleNotFoundError: Module not found: Error: Can't resolve './../$$_gendir/src/app/app.module.ngfactory' in '/Users/xyz/angular-upgrade/backend/myapp/angular/src' .

这是我webpack.config：

new AotPlugin({
  tsConfigPath: './tsconfig.json',
  entryModule: './src/app/app.module#AppModule'
}),

我用来制作构建的脚本是："build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"

以下是我tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "bower_components"
  ]
}

Answer 1

AOT 现在不支持高于 2.0.10 的打字稿版本。你需要确保这一点。另外，你必须将一些角度模块(如http，平台浏览器或核心(改回角度2 - 我使用2.4.0版本--,因为版本2.0.10或更低版本的打字稿不支持它们！

Answer 2

首先：你需要使用 @ngtools/webpack 进行编译。那么你的编译器选项就不像 Angular 所期望的那样。

请确保根据官方 Angular AOT 食谱配置设置和 tsconfig.json

例如，模块属性需要设置为：

"module": "es2015"

此外，您应该通过指定来告诉 ngc 将生成的源放在哪里

"angularCompilerOptions": {
 "genDir": "aot",
 "skipMetadataEmit": true
}

<</div> div class="one_answers">

我在$$_gendir上遇到了类似的错误

根据这篇文章，从构建命令 CLI 中删除--bail使我能够看到更多错误消息$$_gendir因为错误更像是由构建中的先前错误引起的通用消息。