"Uncaught TypeError" switching Angular Builder to "@angular-devkit/build-angular:application"

[angelaki]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

I have a pretty huge project that I'm about to migrate from "builder": "@angular-devkit/build-angular:browser" to "builder": "@angular-devkit/build-angular:application".

After getting this project to build (using the migration guide [https://v17.angular.io/guide/esbuild], had to adopt some import paths etc.), I get a runtime error:

Uncaught TypeError: Class extends value undefined is not a constructor or null

I don't have any chance to create a minimal repro (already tried but always stuck in a bunch of errors), but could please anyone try to help me solve this issue? Should it work out of the box? I don't have any idea what could cause this.

As far as I understand, this issue is caused by cirular dependencies. But: why could it work with the old builder and fail with the new one?

Everywhere around this project I use some base classes ComponentBase extends ServiceBase extends InjectableBase with everyone of them adding some properties / methods / services etc.

Only Services / Components extending these classes cause the error.

I guess it's pretty hard to help without any further knowledge of the code. But any help would be appreceated, finding this issue!

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Uncaught TypeError: Class extends value undefined is not a constructor or null

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.0.6
Node: 20.10.0
Package Manager: npm 8.5.4
OS: win32 x64

Angular: 18.0.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, material-luxon-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.6 (cli-only)
@angular-devkit/build-angular   18.0.6
@angular-devkit/core            18.0.6 (cli-only)
@angular-devkit/schematics      18.0.6 (cli-only)
@angular/cli                    18.0.6
@schematics/angular             18.0.6 (cli-only)
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else?

🍀

[JoostK]

Should it work out of the box? I don't have any idea what could cause this.

Unfortunately this isn't guaranteed. Different bundlers may show deviating behavior w.r.t. certain patterns, primarily around module resolution and potentially also around code ordering.

It does indeed appear there may be cycles in this application that are causing the issue. The way cycles are broken should be assumed arbitrary, but the initial module order is likely a factor in how it ends up behaving. As module ordering is bundler dependent, you may indeed start to see issues where they weren't before.

My only suggestion would be to analyse the code for cycles and rework as needed to get rid of them.

[JoostK]

I am afraid however that this is more of a support request than a bug report, especially in the absense of a reproduction.

[angelaki]

Yeah, sure. I hoped it might become a bug report as I investigate the root issue for this behavior. I tried stackoverflow but the issue got closed due to no reproduction possible (https://stackoverflow.com/questions/78702386).

Is it somehow possible to show the cyclic dependency? E.g. ClassA --> ClassB --> ClassC --> **ClassA**?

[JoostK]

https://www.npmjs.com/package/madge may be useful to identify cycles in ES module imports.

[angelaki]

Thank you! I'll give it a try and let you know what caused this issue. Just maybe it is somehow Angular related ...