@ngtools\webpack AOT 不工作或冻结在 95% 发射

Question

我一直在尝试让 AOT 与我的 Webpack 应用程序一起工作。 (@ngtools/webpack)

有人能帮我吗？

它似乎有效，但是，compiler.js 仍包含在捆绑包中。此外，它仍在寻找我所有的 .html 文件并在所有组件模板上获取 404。

据我所知，它并没有真正做到 AOT 的最佳部分？

这里有什么可以发光的吗，我卡住了！！

谢谢！！

Answer 1

（我不会告诉你我花了多长时间才开始工作。）首先，你使用的是 Angular 4.x 还是 5.x？如果 4.x 需要使用 AotPlugin，如果 5.x 则使用 AngularCompilerPlugin。此外，如果您使用的是 5.0，那么编译器可能会在您的模板中发现一些以前不是问题的错误。这些需要在它起作用之前得到纠正。我什至过了很长时间才看到错误，我想是因为 tsconfig.json 文件中的问题。因此，请确保它是正确的，并且您的 AngularCompilerPlugin 选项正确指向了它。一些示例在您的源目录中有它，我发现将它保存在根目录中（与 webpack.config.js 相同）并在 AngularCompilerPlugin 选项中这样引用它更简单：

   tsConfigPath: "./tsconfig.ngtools.json",

这里是 link 可能的插件选项

https://www.npmjs.com/package/@ngtools/webpack

以下是对我有用的 tsconfig 选项：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist.ngtools",
    "baseUrl": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "es2015",
    "listEmittedFiles": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "files": [
    "./src/app/app.module.ts", /* this includes all dependents */
    "src/polyfills.ts",
    "src/main.ts"
  ]
}

另请注意，使用 ngtools 时不需要或不想要单独的 main.aot.ts 文件，它会在编译时自动将 platform-browser-dynamic 版本调整为 platform-browser。此外，使用 ngtools，您不需要引用 AppModuleNgFactory 组件，这也会自动处理。

我发现 ngtools 不向文件系统输出中间文件并没有多大帮助，因此调试更加困难，但是一旦一切正常，就不必处理中间文件了。

祝你好运！

Answer 2

如果单个文件处理不当或根本没有加载，您将在 95% 发射时无限循环。

更新:: 似乎有一个区域会吞没错误：

reject(new Error('Child compilation failed:\n' + errorDetails));

也就是@ngtools\webpack\src\resource_loader.js的第57行您需要设置一个断点来调试或输出该错误详细信息，否则您将永远停留在 AOT 编译上。

只是为了防止将来有人被困住，基本上如果你陷入无限循环，你可能在正确的轨道上..

我终于有了一些工作，一路上遇到了很多问题..

我不明白的主要事情是，我想，对于 AoT，你所有的文件都必须加载到 webpack

这是 module.rules 最终让我满意的配置运行ning...

// Ahead of Time Compilation
[{ test: /\.ts$/, loader: '@ngtools/webpack', exclude: [/\.(spec)\.ts$/] },
// AoT requires all files to be loaded
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.css$/, loader: 'raw-loader' },
{
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    loader: 'file-loader', options: { name: '[path][name].[ext]' }
}]

我添加了这个加载器，它基本上只是将我的图像放回它们存在的完全相同的位置。但我想这会导致它们被正确打包。

如果我不包含文件类型（或者加载文件时出现某种错误请参阅下面的评论），那么我会陷入无限循环.. .

如果你运行 webpack 使用 --progress --profile 你会看到它卡在了 95% emitting。幕后发生的事情是某种绝对路径与相对路径问题，它在 mkdirp 中陷入循环。

但我想 AoT 的诀窍是确保您拥有适用于您正在使用的每种文件类型的加载程序。

Answer 3

我能够在 AOT

中构建示例 angular5 应用程序

https://github.com/tomalex0/angularx-aot-jit

我创建了一个生成 AOT 和 JIT 的示例 angular5 应用程序，可能与您的结构不同但可以工作

https://github.com/tomalex0/angularx-aot-jit

这个提交差异将更好地展示我在更新到 angular5 时所做的所有更改 https://github.com/tomalex0/angularx-aot-jit/commit/1435fddf1a6336f05e63f30062cb4cd2d0ba771f

tsconfig-aot.json for angular5

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "outDir": "aot",
    "skipLibCheck": true,
    "rootDir": "."
  }
}

不再需要"angularCompilerOptions": {"genDir": "aot" }|
在 webpack 配置中将条目设置为 entry: './js/ng2/app/main.jit.ts'
在 webpack const { AngularCompilerPlugin } = require('@ngtools/webpack'); 和插件中 new AngularCompilerPlugin({tsConfigPath: './tsconfig-aot.json', entryModule: ...})

@ngtools\webpack AOT 不工作或冻结在 95% 发射

@ngtools\webpack AOT doesn't work OR freezes at 95% emitting

webpack

angular2-aot

angular

tsconfig-aot.json for angular5