I am upgrading my Angular 8 projet to Angular 12, also upgrading to webpack 5. The project builds and run fine in dev mode but it does not build in AOT mode. My main-aot.ts file is looking for an app.module.ngfactory file that is not generated. No other error is reported in the process. My questions:

1. Is it OK to use AngularWebpackPlugin now instead of AngularCompilerPlugin?
2. Is my main-aot.ts file (below) correct? I use the same as for Angular 8.
3. If the ngfactory file is not generated, is there a way to get an error message, pointing to the cause of the problem?
4. Is there something else I should do to get the ngfactory file created?

Notes

• The exact version of Angular is 12.2.11. The webpack version is 5.59.1.
• I skipped several line in the file contents shown below. I can add more if needed.

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 */
    },
    ...
}

Build output (relevant content)

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
...

CodePudding user response：

I got the answer from 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);