angular - @ngtools\webpack AOT 不工作或卡住在 95% emitting

Question

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

谁能帮帮我？

它似乎可以工作，但是，compiler.js 仍包含在 bundle 中。此外，它仍在寻找我的所有 .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",

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

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 不向文件系统输出中间文件并没有多大帮助，因此调试更加困难，但是一旦一切正常，就不必处理中间文件了。

祝你好运!