Undescribed Angular NG0203 console message

Question

When I load MatProgressSpinnerModule into app.module.ts I get empty NG0203 error with "stacktrace":

    tQ https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    re https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    fac https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    hydrate https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    get https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    _resolveInjectorDefTypes https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    _resolveInjectorDefTypes https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    PM https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    create https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    wA https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    invoke https://localhost:44378/client/polyfills.js:1
    onInvoke https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    invoke https://localhost:44378/client/polyfills.js:1
    run https://localhost:44378/client/polyfills.js:1
    run https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    bootstrapModuleFactory https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    wA https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    invoke https://localhost:44378/client/polyfills.js:1
    run https://localhost:44378/client/polyfills.js:1
    F https://localhost:44378/client/polyfills.js:1
    invokeTask https://localhost:44378/client/polyfills.js:1
    runTask https://localhost:44378/client/polyfills.js:1
    L https://localhost:44378/client/polyfills.js:1
    promise callback*d https://localhost:44378/client/polyfills.js:1
    scheduleTask https://localhost:44378/client/polyfills.js:1
    scheduleTask https://localhost:44378/client/polyfills.js:1
    scheduleMicroTask https://localhost:44378/client/polyfills.js:1
    F https://localhost:44378/client/polyfills.js:1
    then https://localhost:44378/client/polyfills.js:1
    bootstrapModule https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    636 https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    n https://localhost:44378/client/runtime.js:1
    <anonymous> https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1
    a https://localhost:44378/client/runtime.js:1
    <anonymous> https://localhost:44378/client/main.js?v=tGcUggioS9SQmuEwtHgBh_nWyK0V2FItGwwRHNtEq90:1

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from "@angular/common/http";
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

import { AppComponent } from './app.component';
import { SongbookService } from './services/songbookService';
import router from './router';
import { InterceptorService } from './services/InterceptorService';
import { SpinnerService } from './services/spinnerService';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule,
    router
  ],
  providers: [
    SongbookService,
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
    SpinnerService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have no idea how to fix it, when I rem MatProgressSpinnerModule in NgModule imports - error does not appear. Same issue with ngx-spinner.

If that matter its SPA in .NET application

I had this error, in my case was a library that I developed that requires ngRx and some configuration was missing. To understand what was the cause the trick was to build the project with disabled optimization adding --optimization=false . If you do this the error on console should be clear. — Sergio Rinaudo, Mar 07 '22 at 21:52

score 5 · Answer 1 · answered Jul 19 '22 at 07:33

5

I've also experienced an error "NG0203 inject() must be called from an injection context" from one day to another without really changing something.

I stumbled over following solution which worked in my case: https://stackoverflow.com/a/61801741/18578004

The suggestion is to adjust the compilerOptions within tsconfig.json adding the path for the angular modules as follows:

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "paths": {
      //[...]
      "@angular/*": [ "./node_modules/@angular/*"]
    },
    //[...]
  }
}

Hope it helps...

answered Jul 19 '22 at 07:33

flawesome

322
3
9

It fixes the NG0203 Error for me after upgrading from v14 to v15. However, with this I also loose the typings on rxjs... – Azael Mar 23 '23 at 10:17
I found the problem by searching through the packagelock,json. There I found a package which used an older version (v14) of angular. Upgrading/Removing this package fixed the NG0203 – Azael Mar 23 '23 at 10:44

score 0 · Answer 2 · answered Apr 20 '23 at 10:39

0

This also happened when I tried to use effect out of component in Agular 16.

answered Apr 20 '23 at 10:39

Shadowalker

402
1
7
17

Undescribed Angular NG0203 console message

2 Answers2