Angular 12 + webpack 5 + AOT 构建 - 无法生成 ngfactory 文件答案

【问题标题】：Angular 12 + webpack 5 + AOT build - Unable to generate ngfactory fileAngular 12 + webpack 5 + AOT 构建 - 无法生成 ngfactory 文件
【发布时间】：2021-12-09 08:42:54
【问题描述】：

我正在将我的 Angular 8 项目升级到 Angular 12，同时升级到 webpack 5。该项目在开发模式下构建和运行良好，但在 AOT 模式下不构建。我的main-aot.ts 文件正在寻找未生成的app.module.ngfactory 文件。过程中没有其他错误报告。我的问题：

现在可以使用AngularWebpackPlugin 代替AngularCompilerPlugin 吗？
我的main-aot.ts 文件（如下）是否正确？我使用与 Angular 8 相同的方法。
如果ngfactory文件没有生成，有没有办法得到错误信息，指出问题的原因？
我还需要做些什么来创建 ngfactory 文件吗？

备注

Angular 的确切版本是 12.2.11。 webpack 版本是 5.59.1。
我在如下所示的文件内容中跳过了几行。如果需要，我可以添加更多内容。

main-aot.ts

import { platformBrowser } from "@angular/platform-browser";
import { enableProdMode } from "@angular/core";
import { AppModuleNgFactory } from "./app/app.module.ngfactory";

enableProdMode();

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

webpack-prod.js

module: {
    rules: [
        {
            test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
            loader: '@ngtools/webpack'
        },
        ...
    ]
}
...
plugins: [
    new AngularWebpackPlugin({
        tsconfig: './tsconfig-aot.json',
    }),
    ...
],
...

tsconfig-aot.json

{
    "compilerOptions": {
        ...
    },
    "files": [
        "clientApp/app/app.module.ts",
        "clientApp/main-aot.ts",
        "clientApp/polyfills.ts",
        "clientApp/vendor.ts"
    ],
    "angularCompilerOptions": {
        "skipMetadataEmit": true,
        "trace": true,
        "enableIvy": true  /* Setting false does not help */
    },
    ...
}

构建输出（相关内容）

92% sealing asset processing TerserPlugin(node:6128)
...
modules by path ./node_modules/ 3.31 MiB
  ...
modules by path ./clientApp/ 9.56 KiB
  ./clientApp/vendor.ts + 1 modules 647 bytes [built] [code generated]
  ./clientApp/polyfills.ts + 1 modules 8.64 KiB [built] [code generated]
  ./clientApp/main-aot.ts 296 bytes [built] [code generated]
    92 ms (resolving: 28 ms, restoring: 0 ms, integration: 0 ms, building: 64 ms, storing: 0 ms)
...
ERROR in ./clientApp/main-aot.ts 4:0-64
Module not found: Error: Can't resolve './app/app.module.ngfactory' in 'D:\...\clientApp'
resolve './app/app.module.ngfactory' in 'D:\...\clientApp'
  using description file: D:\...\package.json (relative path: ./clientApp)
    using description file: D:\...\package.json (relative path: ./clientApp/app/app.module.ngfactory)
      (several lines for: no extension, .ts, .js, .json, .css, .scss, .html, and as directory)
        D:\...\clientApp\app\app.module.ngfactory doesn't exist
...

【问题讨论】：

你会想为这个问题添加一个赏金。这很复杂！！！我希望你能得到答案。

标签： angular webpack angular2-aot

【解决方案1】：

我从Alan Agius GitHub 得到了答案：

这是意料之中的。 ngfactory 文件不再使用 Ivy 生成。你可以删除 .ngfactory 引用。
import { platformBrowser } from "@angular/platform-browser";
import { enableProdMode } from "@angular/core";
import { AppModule } from "./app/app.module";

enableProdMode();

platformBrowser().bootstrapModule(AppModule);

【讨论】：