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

Question

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

1. 现在可以使用 AngularWebpackPlugin 而不是 AngularCompilerPlugin 吗？
2. 我的 main-aot.ts 文件(如下)正确吗？我使用与 Angular 8 相同的内容。
3. 如果未生成 ngfactory 文件，是否有办法获取错误消息，指出问题的原因？
4. 我还应该做些什么来创建 ngfactory 文件吗？

注释

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

---

ma​​in-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
...

Answer 1

我从 Alan Agius 得到了答案上GitHub :

This is expected. ngfactory files are no longer generated with Ivy. You can remove .ngfactory references.

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

enableProdMode();

platformBrowser().bootstrapModule(AppModule);