@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",

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

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。同样使用ngtools，您不需要引用AppModuleNgFactory组件，这也是自动处理的。

我发现ngtools不会将中间文件输出到文件系统是不太有用的，因此调试更加困难，但是一旦工作正常，就不用处理中间文件了。

祝好运！

Answer 2

我能够在qazxsw poi中制作一个示例角5应用程序

AOT

我创建了一个示例angular5应用程序，它生成https://github.com/tomalex0/angularx-aot-jit和AOT，可能与您的结构不同但是工作

JIT

这个提交差异将更好地描述我在更新为angular5 https://github.com/tomalex0/angularx-aot-jit时所做的更改

tsconfig-aot.json for angular5

https://github.com/tomalex0/angularx-aot-jit/commit/1435fddf1a6336f05e63f30062cb4cd2d0ba771f

不再需要{ "compilerOptions": { "module": "es2015", "moduleResolution": "node", "target": "es5", "noImplicitAny": false, "sourceMap": true, "mapRoot": "", "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "outDir": "aot", "skipLibCheck": true, "rootDir": "." } } |
在webpack配置中输入为"angularCompilerOptions": {"genDir": "aot" }
在webpack entry: './js/ng2/app/main.jit.ts'和插件中作为const { AngularCompilerPlugin } = require('@ngtools/webpack');

Answer 3

如果单个文件处理不正确或根本没有加载，您将获得95％发射的无限循环。

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

new AngularCompilerPlugin({tsConfigPath: './tsconfig-aot.json', entryModule: ...})

这是@ngtools \ webpack \ src \ resource_loader.js的第57行你想要设置一个断点来调试或输出那些错误细节，否则你将永远陷入AOT编译。

只是为了防止有人在将来陷入困境，基本上如果你陷入无限循环，你可能会走上正轨......

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

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

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

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

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

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

如果你使用--progress --profile运行webpack，你会发现它停留在95％的排放上。幕后发生的事情是某种绝对路径与相对路径问题，它在mkdirp的循环中被捕获。

但我想诀窍是AoT，就是确保你有一个加载器用于你正在使用的每种文件类型。

@ngtools \ webpack AOT不起作用或95％发射冻结

问题描述投票：5回答：3

3个回答

tsconfig-aot.json for angular5

最新问题

@ngtools \ webpack AOT不起作用或95％发射冻结

问题描述 投票：5回答：3

3个回答

tsconfig-aot.json for angular5

最新问题

问题描述投票：5回答：3