Question

我一直试图让AOT使用我的Webpack应用程序。（@ ngtools /的WebPack）

任何人都可以帮助我吗？

似乎工作正常，但compile.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文件，它会在编译时自动将平台浏览器动态版本调整为平台浏览器。同样使用ngtools，您不需要引用AppModuleNgFactory组件，这也是自动处理的。

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

祝你好运！

Answer 2

我能够在AOT

中制作示例angular5 app build

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

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

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: ...})

Answer 3

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

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

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

这是@ngtools \ webpack \ src \ resource_loader.js的第57行您希望设置断点来调试或输出错误详细信息，或者您将永远停留在AOT编译上。

如果有人在将来陷入困境，我们会离开这里，基本上如果你陷入无限循环，你可能会走上正轨......

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

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

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

// 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]' }
}]

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

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

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

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

@ngtools \ webpack AOT无法工作或冻结95％的排放量

3 个答案:

tsconfig-aot.json for angular5