Angular-cli aot构建在生产模式下失败

Question

ERROR in Child compilation failed: Module build failed: TypeError: Cannot read property 'newLine' of undefined at Object.getNewLineCharacter (C:...\node_modules\typescript\lib\typescript.js:9581:20) at Object.createCompilerHost (C:...\node_modules\typescript\lib\typescript.js:66675:26) at Object.ngcLoader (C:...\node_modules\@ngtools\webpack\src\loader.js:386:33): TypeError: Cannot read property 'newLine' of undefined

ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:...\src' @ ./src/main.ts 2:0-74 @ multi ./src/main.ts

npm ERR! Windows_NT 10.0.15063 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "ng" "build" "--" "--prod" npm ERR! node v6.10.3 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! fol-mcdean@0.1.0 ng: ng "build" "--prod" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the fol-mcdean@0.1.0 ng script 'ng "build" "--prod"'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the fol-mcdean package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ng "build" "--prod" npm ERR! You can get information on how to open an issue for this project with: npm ERR!
npm bugs fol-mcdean npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls fol-mcdean npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! C:...\npm-debug.log

我有一个项目，使用@angular 4.1.3 和@angular/cli 1.1.0-rc.0（也尝试了 1.04，结果相同）。所以项目构建良好 ng build --aot=true 但使用 ng build --prod.

失败并出现此错误

我对 \node_modules@ngtools\webpack\src\loader.js

做了一些调试

事实证明它在这些行上中断了：

function ngcLoader() { 
...
const sourceFileName = this.resourcePath; //here is index.ts file, I'll show it later
const plugin = this._compilation._ngToolsWebpackPluginInstance; //plugin === undefined here!
if (plugin && plugin instanceof plugin_1.AotPlugin) { //and of course this is false
...
} else {
const options = loaderUtils.getOptions(this) || {}; //and options are {} here...
...
const compilerHost = ts.createCompilerHost(compilerOptions); //and of cource it breaks here
...
}
}

失败的文件是index.ts:

export * from './GJLog.component';

我也检查了所有包的所有版本，清理缓存，重新安装节点..一切..但在AOT模式下仍然是同样的问题。同时完美编译aot=false...

然后我决定阅读 --prod 和非 --prod 之间的区别：并且运行以下命令：

npm run ng build -- --aot=true --environment=prod --output-hashing=all --sourcemaps=false --extract-css=true

成功了！

所以，剩下的是：

--prod also sets the following non-flaggable settings:

1) Adds service worker if configured in .angular-cli.json.

2) Replaces process.env.NODE_ENV in modules with the production value (this is needed for some libraries, like react).

3) Runs UglifyJS on the code

所以我没有service worker，process.env.NODE_ENV也不适用... 那么这是 UglifyJS 吗？不知道下一步该怎么做。有什么建议吗？

Answer 1

我对问题的解决方案和调查如下： https://github.com/angular/angular-cli/issues/6426

一般来说，原因似乎是在 cssnano 和一个空的 url("") 中。

Angular-cli aot构建在生产模式下失败

Angular-cli aot build fails in production mode

node.js

angular-cli

angular2-aot

angular