与webpack合作的Angular 4 AOT

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的typescript版本。你需要确保。此外，您还必须将某些angular模块，如http、platform-browser或core改回angular 2 --我使用2.4.0 --因为2.0.10或更低版本的typescript不支持它们！

Answer 2

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

请确保根据Official Angular AOT Cookbook配置您的设置和tsconfig.json

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

"module": "es2015"

此外，还应该通过指定以下内容来告诉ngc将生成的源代码放在哪里

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

Answer 3

我在使用$$_gendir时也遇到了类似的错误

根据this post，从构建命令cli中删除--bail使我能够看到更多的错误消息，因为$$_gendir错误更多地是由构建中以前的错误引起的一般消息。