How to fix Angular NX project NG0203 error

Question

I am struggling with the NG0203 error, while my colleagues are able to serve the project without any problem. I tried to upgrade and downgrade the versions of both Angular and Nx, but it did not work. Also, I tried to copy the entirety of the node_modules from one of my teammates, but still had no luck.I don't think it's related but I also checked the ports where i need to serve the apps on.

Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.io/errors/NG0203

i have several angular applications with different versions and i dont experience any trouble with them thanks to NVM. Does anyone know what could be the root cause of this?

nx version 17.2 ng version 16.2 macOS 13.6.3 (22G436) - intel

i do make it sure that my project and packages are exactly same with my teammates. these all findings make the thing more mysterious to me.

i tried to downgrade and upgrade the nx and ng versions. also tried serve the project on node 16 and 18 versions. also checked several browsers.

i was able to serve the project on windows via node v18.19, then also tried to test this on another mac 2016 but it did not work either.

Answer 1

as so far it should be highlighted to you that this error arise when the inject() function is called outside of the allowed injection contexts.

so inject() function can be called within the constructor of a class to inject dependencies.

also check for any configuration issues in the project's angular.json file or any other relevant configuration files

please take a look at NG0203

providers: [
  {provide: Car, useFactory: () => {
    // OK: a class factory
    const engine = inject(Engine);
    return new Car(engine);
  }}
]

Calls to the inject function outside of the class creation or runInInjectionContext will result in error. Most notably, calls to inject() are disallowed after a class instance was created, in methods (including lifecycle hooks)

@Component({ ... })
export class CarComponent {
  ngOnInit() {
    // ERROR: too late, the component instance was already created
    const engine = inject(Engine);
    engine.start();
  }
}

Debugging the error

Work backwards from the stack trace of the error to identify a place where the disallowed call to inject() is located.

To fix the error move the inject call to an allowed place (usually a class constructor or a field initializer).

Note: If you are running in a test context, TestBed.runInInjectionContext will enable inject() to succeed.

as you highlighted that the sane code with the exactly same configration is working fine to others .so try the following trick and see if works.

1. try disconnecting the serve and do some changes to code (could be just adding blank spacers in it) and click to save then try by serve it again.
2. if 1st did not works then try restarting your development server again by clearing cached files.

Answer 2

Try calling npm version ng and compare results

The problem may be related to using npm package ng(Angular CLI) from devDependencies in package.json vs globally installed ng. Some IDE-s may automatically find locally installed to node_modules ng and ignore globally installed ng, hence when you run command which uses ng(and most npm scripts in Angular application use ng) from terminal of IDE vs regular terminal, version of ng may be different

Another possible cause of problem with versions may be caused by different OS users seeing different versions of globally installed npm package. For example, when terminal is called as super user, it sees PATH without some commands, which are added in ~/.bash_profile, and may use version of package from a different place