CODEWITHSUNDEEP
angularngrxngrx-storengrx-effects
Houssem Trabelsi
Houssem Trabelsi

Reputation: 41

Ngrx dependency injection issue with esbuild/build-angular:application

After upgrading from Angular 16 to Angular 17, change the Angular builder to use the esbuild builder: @angular-devkit/build-angular:browser -> @angular-devkit/build-angular:application. When I serve the application, I encounter this runtime 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:1093:15) at ɵɵinject2 (core.mjs:1106:42) at Object.FeatureEffects_Factory [as factory] (feature-effects.ts:15:28) at chunk-BKMMLQFQ.js?v=f9269614:1898:35 at runInInjectorProfilerContext (chunk-BKMMLQFQ.js?v=f9269614:523:5) at R3Injector.hydrate (chunk-BKMMLQFQ.js?v=f9269614:1897:11) at R3Injector.get (chunk-BKMMLQFQ.js?v=f9269614:1790:23) at injectInjectorOnly (chunk-BKMMLQFQ.js?v=f9269614:646:36) at ɵɵinject (chunk-BKMMLQFQ.js?v=f9269614:652:59) at inject (chunk-BKMMLQFQ.js?v=f9269614:661:10)

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: false,
        strictActionImmutability: false
      }
    }),
    EffectsModule.forRoot([FeatureEffects])
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule {}

Ngrx:
"@ngrx/effects": "17.2.0",
"@ngrx/entity": "17.2.0",
"@ngrx/router-store": "17.2.0",
"@ngrx/store": "17.2.0",
"@ngrx/store-devtools": "17.2.0"

Angular version: 17
Node: v18.19.0

Stackblitz example: https://stackblitz.com/~/github.com/thoussem/ngrx17-esbuild-issue

Based on the Angular documentation, there are no breaking changes when migrating from @angular-devkit/build-angular:browser to @angular-devkit/build-angular:application, so everything should work fine

Upvotes: 4

Views: 298

Answers (1)

Tomas-trls
Tomas-trls

Reputation: 21

I had the same problem with an nx monorepo using angular 17 and nx 19
To fix it, I had to update my tsconfig.base.json, and remove the
paths: { "@angular/*": ["./node_modules/@angular"] }. This is a bug from angular, although this path is supposed to help. But it creates the bug. Secondly, in your angular.json or (project.json if using Nx) Add "preserveSymlinks": true in your build options.

Hopefully this helps you!

Upvotes: 2

Related Questions