CODEWITHSUNDEEP
angulardependency-injectionesbuild
Jelle Schrans
Jelle Schrans

Reputation: 51

Why do i keep getting the NG0203 error when i build my Angular app using esbuild?

Im trying to migrate to esbuild to build my Angular application. I've completed everything i needed to do, but i keep seeing this error being logged in the console:

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

I've tried everything thats described here, at 'Using application builder': https://angular.io/guide/esbuild

My app.config.ts looks like this:

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      BrowserModule,
      SharedModule,
      DataSetModule,
      LookUpTablesModule,
      NormsModule,
      StoreModule.forRoot({
        mappings: mappingsReducer,
        auth: authReducer,
      }),
      EffectsModule.forRoot([AuthEffects])
    ),
    provideAnimations(),
    provideHttpClient(),
    provideRouter(routes),
  ],
};

And i inject classes like this, which worked with the former builder:

constructor(
    private router: Router,
    public excelDownload: ExcelDownloadService,
    private route: ActivatedRoute,
    private dataSetService: DataSetService
  ) {} ```

Edit: this is the exact error that is being logged:
`ERROR 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
    at injectInjectorOnly (core.mjs:985:15)
    at ɵɵinject3 (core.mjs:998:42)
    at Object.factory (core.mjs:27529:46)
    at core.mjs:6247:43
    at runInInjectorProfilerContext (core.mjs:948:9)
    at R3Injector.hydrate (core.mjs:6246:17)
    at R3Injector.get (core.mjs:6114:33)
    at definition.getStandaloneInjector (core.mjs:27545:31)
    at ComponentFactory.create (core.mjs:15477:57)
    at _ApplicationRef.bootstrap (core.mjs:31863:42)`

Upvotes: 3

Views: 2596

Answers (2)

RyanSand20
RyanSand20

Reputation: 1198

If you see this error while SWITCHING to ESBUILD, you probably have a @angular path in your tsconfig.

REMOVE this option now, and it will fix the issue.

"paths": {
      "@angular/*": ["./node_modules/@angular/*"], <--- DELETE THIS
      ...
}

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 57442

Please remove these modules one by one to identify the problematic one. The remaining imports you can move to the imports of Root component if the root component is standalone, if not, you can add to the imports array of app module!

Instead of BrowserModule use CommonModule, which might give you some error!

@Component({
    imports: [
      CommonModule,
      SharedModule,
      DataSetModule,
      LookUpTablesModule,
      NormsModule,
    ]
})
export class App {

}

In my opinion, only these two might be needed for importProvidersFrom

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      StoreModule.forRoot({
        mappings: mappingsReducer,
        auth: authReducer,
      }),
      EffectsModule.forRoot([AuthEffects])
    ),
    provideAnimations(),
    provideHttpClient(),
    provideRouter(routes),
  ],
};

Upvotes: 0

Related Questions