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

[ConnorsFan]

🐞 Bug report

Command

• build

I use AngularWebpackPlugin directly in my Angular build script.

Is this a regression?

I haven't tried between Angular 8.2 + webpack 4 and Angular 12.2.11 + webpack 5.

Description

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. The main-aot.ts file is looking for an app.module.ngfactory file that is not generated. No other error is reported in the process. AngularWebpackPlugin is used to compile the project in AOT mode.

I did not have any problem building and running the same project with Angular 8 and webpack 4, using AngularCompilerPlugin.

🔬 Minimal Reproduction

This GitHub repository contains a simplified version of my project and has the same problem: the ngfactory file is not generated.

When loaded in Visual Studio Code:

• Running the webpack-dev script gives a valid output
• Running the webpack-production script causes the error message shown below. The ngfactory file is missing.

🔥 Exception or Error

ERROR in ./clientApp/main-aot.ts 4:0-64
Module not found: Error: Can't resolve './app/app.module.ngfactory' in '...\test-001\clientApp'
resolve './app/app.module.ngfactory' in '...\test-001\clientApp'
  using description file: ...\test-001\package.json (relative path: ./clientApp)
    using description file: ...\test-001\package.json (relative path: ./clientApp/app/app.module.ngfactory)
      no extension
        ...\test-001\clientApp\app\app.module.ngfactory doesn't exist
      .ts
        ...\test-001\clientApp\app\app.module.ngfactory.ts doesn't exist
      .js
        ...\test-001\clientApp\app\app.module.ngfactory.js doesn't exist
      .json
        ...\test-001\clientApp\app\app.module.ngfactory.json doesn't exist
      .css
        ...\test-001\clientApp\app\app.module.ngfactory.css doesn't exist
      .scss
        ...\test-001\clientApp\app\app.module.ngfactory.scss doesn't exist
      .html
        ...\test-001\clientApp\app\app.module.ngfactory.html doesn't exist
      as directory
        ...\test-001\clientApp\app\app.module.ngfactory doesn't exist

ERROR in clientApp/main-aot.ts:4:36 - error TS2307: Cannot find module './app/app.module.ngfactory' or its corresponding type declarations.

🌍 Your Environment

Windows 10 Professional
Node 14.18.1
Angular 12.2.11
webpack 5.59.1

[alan-agius4]

Hi @ConnorsFan,

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

[ConnorsFan]

It works. I added your answer to the question I had asked on StackOverflow. Thanks a lot!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}