angular - @ngtools\webpack AOT无法正常工作，或在发射95％时卡住

我一直想让AOT与我的Webpack应用一起工作。
(@ ngtools/webpack)

有人可以帮我吗？

它似乎可以正常工作，但是bundle中仍然包含了editor.js。
此外，它仍在寻找我的所有.html文件，并在所有组件模板上获取404。

据我所知，这不是在尽力完成AOT的最佳功能吗？

这里有什么可以照亮的，我被卡住了!!

谢谢!!

最佳答案

(我不会告诉您我花了多长时间才能完成此工作。)首先，您使用的是Angular 4.x还是5.x？如果是4.x，则需要使用AotPlugin；如果是5.x，请使用AngularCompilerPlugin。同样，如果您使用的是5.0，则编译器可能会在模板中发现一些以前没有问题的错误。需要纠正这些问题，然后才能起作用。我想是因为我的tsconfig.json文件中的问题，甚至还很长时间才看到错误。因此，请确保这是正确的，并由AngularCompilerPlugin选项正确指向。一些示例在您的源目录中有它，我发现将它保存在根目录(与webpack.config.js相同)并在AngularCompilerPlugin选项中像这样引用是更简单的:

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

这是可能的插件选项的链接

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-b​​rowser-dynamic版本调整为platform-b​​rowser。同样，使用ngtools，您无需引用AppModuleNgFactory组件，该组件也会自动处理。

我发现ngtools不会将中间文件输出到文件系统没有太大帮助，因此调试起来会更加困难，但是一旦一切正常，不必处理中间文件就很好了。

祝你好运!

关于angular - @ngtools\webpack AOT无法正常工作，或在发射95％时卡住，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47313553/