"./node_modules/@angular/*" cause NG0203: `inject()` must be called from an injection context such as a constructor

[IdanSysmetricAcount]

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

Don't known / other

Is this a regression?

Yes

Description

hi

i use angular 17.1.2 and i change angular build from "build-angular:browser" to "@angular-devkit/build-angular:application" in angular.json and i get error "NG0203: inject() must be called from an injection context such as a constructor". i notice that the error is due the line in my "tsconfig.json": "paths": { "@angular/": [ "./node_modules/@angular/" ] }

i need this line because i use base library (without it the signal wont fire). if i remove this line all work find in development with "ng serve", but its not work in publish after "ng build".

what can i do for build with "@angular-devkit/build-angular:application" that will work with "@angular/": [ "./node_modules/@angular/" ] in the "tsconfig.json"?

thank you.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

"NG0203: inject() must be called from an injection context such as a constructor"

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

Angular CLI: 17.1.2
Node: 20.10.0
Package Manager: npm 10.4.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1701.2
@angular-devkit/build-angular   17.1.2
@angular-devkit/core            17.1.2
@angular-devkit/schematics      17.1.2
@schematics/angular             17.1.2
ng-packagr                      17.1.2
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.3

Anything else?

No response

[JeanMeche]

I believe this is the same root cause as angular/angular#35586.

You have multiple copies of angular/core.

[IdanSysmetricAcount]

i have 1 angular/core in my base library and 1 in my main app:

{ "name": "visionbase", "version": "0.0.0", "dependencies": { "@angular/core": "17.1.2", "@angular/router": "17.1.2", "lodash-es": "4.17.21", "moment": "2.30.1", "chart.js": "4.4.1", "chartjs-plugin-annotation": "3.0.1", "@microsoft/signalr": "8.0.0" } }

and "@angular/core": "17.1.2" in my main app:

"dependencies": { "@angular/animations": "17.1.2", "@angular/common": "17.1.2", "@angular/compiler": "17.1.2", "@angular/core": "17.1.2", "@angular/forms": "17.1.2", "@angular/platform-browser": "17.1.2", "@angular/platform-browser-dynamic": "17.1.2", "@angular/router": "17.1.2", "@angular/localize": "17.1.2", "rxjs": "7.8.1", "tslib": "2.6.2", "zone.js": "0.14.3", "lodash-es": "4.17.21", "ngx-moment": "6.0.2", "moment": "2.30.1", "chart.js": "4.4.1", "ng2-charts": "5.0.4", "chartjs-plugin-annotation": "3.0.1", "chartjs-adapter-moment": "1.0.1", "primeng": "17.6.0", "primeicons": "6.0.1", "ts-keycode-enum": "1.0.6", "@microsoft/signalr": "8.0.0", "bootstrap": "5.3.2", "@ng-bootstrap/ng-bootstrap": "16.0.0", "@fortawesome/fontawesome-free": "6.5.1" },

i add pic of my tree project. the only change was i move to esbuild,

how can i fix it to work with the new build? thank you

[JeanMeche]

Can you give us the ouput of npm why @angular/core ?

[IdanSysmetricAcount]

content on "ng serve" in Vite folder: i can see in c:\csProj\Vision\clientapp.angular\cache\17.1.2\vite\ that there is 2 files of core: @angular_core.js and @angular_core_primitives_signals.js maybe that is the problem?

by the way, if i publish with "ng build" it work with no error NG0203, the problem is only with "ng serve" that will work only if i remove the "@angular/": [ "./node_modules/@angular/" ] line (but i need it for production in ngBuild).

[spock123]

@IdanSysmetricAcount remove node_modules and .cache (or .angular) in your folder. It's most likely a caching issue (it was for me)

[IdanSysmetricAcount]

remove node_modules and .cache did not fix it. i create a simple test project(with main project + base directory) with 1 page ("app.component.ts") to reproduce the problem. only need npm install for both and then "npm start" from "\AngularProject1\AngularProject1" directory it will work only when i remove @angular/": [ "./node_modules/@angular/" ] from tsconfig. test.zip

thank you.

[JoostK]

The paths options causes @angular/core to be included in the main.js file in addition to the prebundled copy of @angular/core by Vite. Disabling the cache disables prebundling ng cache off and that avoids the issue. I'm not sure why the path mapping matters though.

[IdanSysmetricAcount]

i prefer to work with "ng cache on" because the performance is better.

the reason I'm not remove @angular/": [ "./node_modules/@angular/" ] from tsconfig is that the production version(ng build) will throw signals exceptions.

what i did to make it work today is: i create 2 tsconfig.app.json , 1 for develop (that work with ng serve) with NO PATH and 1 for production with PATH (that work with ng build) and redirect them in angular.json.

my question is, i want to be sure, is this the write way to work with the new builder with multi directories?

thank you.

[alan-agius4]

Please see: https://github.com/angular/angular-cli/issues/26513#issuecomment-1830434529

[angular-automatic-lock-bot[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.}