ng test command broken when using Node.js 22 on version 18.2.0

[MikaStark]

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

Don't known / other

Is this a regression?

Yes

Description

When using Node.js 22 (e.g. 22.7.0) with angular 18.2.0, ng command fails because it cannot find some modules.

You can easily reproduce this behavior by starting a whole new project (ng new) and run ng test just after.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

$ ng test
⠋ Generating browser application bundles (phase: setup)...An unhandled exception occurred: Cannot find module 'source-map-loader'
Require stack:
- /home/mickael-olaria/Développement/ng-hello-world/node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/common.js
- /home/mickael-olaria/Développement/ng-hello-world/node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/index.js
- /home/mickael-olaria/Développement/ng-hello-world/node_modules/@angular-devkit/build-angular/src/builders/karma/index.js
- /home/mickael-olaria/Développement/ng-hello-world/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
See "/tmp/ng-iPSLTf/angular-errors.log" for further details.
⠋ Generating browser application bundles (phase: setup)...^

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

Node: 22.7.0
Package Manager: npm 10.8.2
OS: linux x64

Angular: 18.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@schematics/angular             18.2.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Anything else?

Worked as expeected with Angular version 18.1.4

[alan-agius4]

The error message indicates that the package in question is missing from the node_modules directory. I was unable to reproduce this issue on my local environment.

Here are the details of my setup and the results of my tests:

$ ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 18.2.1
Node: 22.7.0
Package Manager: npm 10.8.2
OS: linux x64

Angular: 18.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@schematics/angular             18.2.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

$ ng test
✔ Browser application bundle generation complete.
26 08 2024 09:45:47.525:WARN [karma]: No captured browser, open http://localhost:9876/
26 08 2024 09:45:47.544:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
26 08 2024 09:45:47.544:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
26 08 2024 09:45:47.548:INFO [launcher]: Starting browser Chrome
26 08 2024 09:45:51.904:INFO [Chrome 128.0.0.0 (Linux x86_64)]: Connected on socket Xs0u2XwBiUYY3laOAAAB with id 45870715
Chrome 128.0.0.0 (Linux x86_64): Executed 3 of 3 SUCCESS (0.143 secs / 0.122 secs)
TOTAL: 3 SUCCESS

The output from npm ls source-map-loader is:

$ npm ls source-map-loader
└─┬ @angular-devkit/build-angular@18.2.1
  └── source-map-loader@5.0.0

To suggest to try running npm install again. If the problem persists, consider deleting the lock file and node_modules directory with the following commands:

rm -rf package-lock.json node_modules
npm install

[MikaStark]

@alan-agius4 thanks for the quick answer. Actually I already tried to remove the node_modules folder and the package-lock.json file and reinstall. But it gives the same result.

Running npm ls source-map-loader gives me the same ouput as you.

Maybe it can be related to my OS. I'm on Ubuntu 24.04, which one do you use ?

[alan-agius4]

I highly doubt this is OS related. I am using an internal Linux build.

What is the output of npm ls source-map-loader?

[MikaStark]

Same as you :

$ npm ls source-map-loader
ng-hello-world@0.0.0 /home/mickael-olaria/Développement/ng-hello-world
└─┬ @angular-devkit/build-angular@18.2.1
  └── source-map-loader@5.0.0

[alan-agius4]

It seems you're running npm ls in the wrong directory. The error indicates that the node_modules directory is located at /home/mickael-olaria/Développement/ng-hello-world.

[MikaStark]

I updated my previous comment, same result anyway

[alan-agius4]

Based on this, I’m unsure why source-map-loader cannot be resolved since it exists and is in the correct location. From the Angular CLI perspective, we are using a standard require.resolve call to handle this library.

angular-cli/packages/angular_devkit/build_angular/src/tools/webpack/configs/common.ts

Line 266 in 1ac220d

loader: require.resolve('source-map-loader'),

Therefore, there's not much more we can do from our end. It might be worth considering a re-installation of Node.js to see if that resolves the issue.