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

Question

我正在将我的 Angular 8 projet 升级到 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.
我在下面显示的文件内容中跳过了几行。如果需要我可以添加更多。

主-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 on 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);

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

Angular 12 + webpack 5 + AOT build - Unable to generate ngfactory file

webpack

angular2-aot

angular