A with webpack v5 bundled unchanged angular app, does not work anymore

[deleonio]

Bug report

A successful bundled angular app, does not work after webpack 5 upgrade.

What is the current behavior?

Link: https://github.modevel.de/poc/webpack/#series

If the current behavior is a bug, please provide the steps to reproduce.

Please use the bash commands to reproduce the same code.

Console:

mkdir angular-bug
cd angular-bug
npm i @leanup/cli@webpack @leanup/cli-angular@webpack
npx lean create -o
npm run build

Open manuel the dist/index.html.

If you need more transparency in the webpack.config: https://github.com/leanupjs/leanup/blob/0e7d4589ab78ca534bc8a13ec7760be9710576cf/packages/cli/core/src/webpack.config.ts#L135

What is the expected behavior?

Other relevant information:
webpack version: ^5
Node.js version: ^4
Operating System: win / unix
Additional tools:

• webpack-cli ^4

[TheLarkInn]

(cc @StephenFluin @hansl we got this in from Twitter triage)

[StephenFluin]

CC: @kyliau @mgechev

[sokra]

Not quite sure what's going on here...

That's the unmangled error message:

Uncaught NullInjectorError: StaticInjectorError(Platform: core)[CompilerFactory]: 
  NullInjectorError: No provider for CompilerFactory!
    at NullInjector.get (webpack://angular-bug/./node_modules/@angular/core/fesm2015/core.js?:1121:27)
    at resolveToken (webpack://angular-bug/./node_modules/@angular/core/fesm2015/core.js?:11801:24)
    at tryResolveToken (webpack://angular-bug/./node_modules/@angular/core/fesm2015/core.js?:11746:16)
    at StaticInjector.get (webpack://angular-bug/./node_modules/@angular/core/fesm2015/core.js?:11641:20)
    at compileNgModuleFactory__PRE_R3__ (webpack://angular-bug/./node_modules/@angular/core/fesm2015/core.js?:27922:38)
    at PlatformRef.bootstrapModule (webpack://angular-bug/./node_modules/@angular/core/fesm2015/core.js?:28166:16)
    at eval (webpack://angular-bug/./src/angular.main.js?:21:84)
    at Object.6466 (file:///C:/Repos/_/angular-bug/dist/app.js:3050:1)
    at __webpack_require__ (file:///C:/Repos/_/angular-bug/dist/app.js:3467:42)
    at eval (webpack://angular-bug/./src/main.ts?:1:71)

Seems like not CompilerFactory is available. I figured that the webpack 5 version uses compileNgModuleFactory__PRE_R3__ and the webpack 4 version uses compileNgModuleFactory__POST_R3__

I have not deep knownledge about angular so only guessing:

CompilerFactory and compileNgModuleFactory__PRE_R3__ should not be used in production build. Seems like your own sources are not being ivy-compiled. Probably something related to the AngularCompilerPlugin.

Maybe someone from the angular team as more insight into that...

[sokra]

Ok I found the problem in AngularCompilerPlugin:

It hooks into resolverFactory.hooks.resolveOptions and tries to "fix" the mainFields, but it doesn't "fix" byDependency.xxx.mainFields. It could just use our own merge function: cleverMerge(resolveOptions, { mainFields: [...ivyMainFields, "..."] } ) which handles this correctly.

[alexander-akait]

Answer above and we fix it, feel free to feedback

[sokra]

I would like to track this until this is fixed in AngularCompilerPlugin

[deleonio]

Fixed 👍

https://github.com/leanupjs/leanup/blob/3a37e4cd90986c0e229df8344980b3c3eda089aa/packages/cli/core/package.json#L89

With angular@11.0.0-next.6 and webpack@5.1.2.

https://github.modevel.de/poc/webpack/#series

[sokra]

fixed by angular/angular-cli#19062