Angular 6 - production build failed because of NGRX

Question

I wanted to generate and test the production build using this command:

ng build --prod --configuration=production 
ng serve --prod --configuration=production

The files were generated correctly, but when I opened the site in browsers I get this error:

Uncaught Error: StaticInjectorError[n -> t]: StaticInjectorError(Platform: core)[n -> t]: NullInjectorError: No provider for t!

My production configuration looks like this:

       "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": true,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": true,
          "buildOptimizer": true,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        },

I realized that the problem is using ngrx in my application. When I remove everything that is connected to ngrx somehow, the app opens properly. Do you have any ideas what I should fix?

Below I'm attaching some examples of ngrx in my app.

AppModule

export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [storeFreeze] : [];

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    StoreModule.forRoot(reducers, {metaReducers}),
    EffectsModule.forRoot([AuthEffects]),
  ],

AppCompoment:

  userState: Observable<User.State>;

  constructor(private store: Store<AppState>) {}

  ngOnInit() {
    this.userState = this.store.select('user');
  }

EDITED

Here is a full AppModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AuthGuard} from './shared-module/services/auth.guard';
import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {AppRoutingModule} from './app-routing.module';
import {ErrorComponent} from './shared-module/components/error/error.component';
import {Globals} from './shared-module/services/globals';
import {UserService} from './user-module/services/user.service';
import {FacebookModule} from 'ngx-facebook';
import {AuthenticationService} from './user-module/services/authentiation.service';
import {RouteReuseStrategy} from '@angular/router';
import {CustomRouteReuseStrategy} from './router-strategy';
import {NotAllowedComponent} from './shared-module/components/not-allowed/not-allowed.component';
import {MetaReducer, Store, StoreModule} from '@ngrx/store';
import {EffectsModule} from '@ngrx/effects';
import {AppState, reducers} from './store/app.reducers';
import {AuthEffects} from './store/auth/auth.effects';
import {SharedModule} from './shared-module/shared.module';
import {UserModule} from './user-module/user.module';
import {VideoManagerService} from './video-module/services/video-manager.service';
import {HttpClientModule} from '@angular/common/http';
import {SpecialistChoiceEffect} from './store/specialist-choice/specialist-choice.effects';
import {SpecialistService} from './specialist-module/services/specialist-service';
import {environment} from '../environments/environment';
import {storeFreeze} from 'ngrx-store-freeze';

export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [storeFreeze] : [];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NotAllowedComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FacebookModule.forRoot(),
    AppRoutingModule,
    StoreModule.forRoot(reducers, {metaReducers}),
    EffectsModule.forRoot([AuthEffects, SpecialistChoiceEffect]),
    SharedModule,
    UserModule
  ],
  providers: [
    AuthGuard,
    Globals,
    VideoManagerService,
    UserService,
    AuthenticationService,
    SpecialistService,
    Store,
    {
      provide: RouteReuseStrategy,
      useClass: CustomRouteReuseStrategy
    }
  ],

  bootstrap: [AppComponent]
})

export class AppModule {
}

EDITED 2

I changed the build configuration and currently I'm receiving much better logs:

StaticInjectorError(AppModule)[SpecialistChoiceEffect -> MatSnackBar]: StaticInjectorError(Platform: core)[SpecialistChoiceEffect -> MatSnackBar]: NullInjectorError: No provider for MatSnackBar!

This is SpecialistChoiceEffect:

 constructor(private actions$: Actions,
          private router: Router,
          public infoBar: MatSnackBar) {
  }

Let me say, that in AppModule I have imported SharedModule which exports MaterialModule which exports MatSnackBarModule. So everything looks fine...

What this error means is that you are not providing one of your services in you app.module.ts can you please post your entire app.module.ts — Smokey Dawson, Aug 01 '18 at 07:20
@SmokeyDawson have you any hints how to recognize the missing service? — Maciej Wojcik, Aug 01 '18 at 07:58
Are you running tests / do you have .spec files in the app? If so you need to ensure you are importing MaterialModule in your components TestBed.configureTestingModule({ .. }) too. — Andrew Hill, Aug 01 '18 at 10:10

score 0 · Answer 1 · answered Aug 02 '18 at 23:47

This seems to be a bug in the CLI, have a look at the corresponding Github issue.

As a solution you can try the following:

Update to the latest versions for @angular/cli and @angular-devkit (updating the other @angular packages probably wouldn't hurt)

Clear your node_modules and do a fresh install

Side note: The prod build is behaving differently because it's using the AoT compiler (ahead of time) instead of the JIT compiler (just in time) in development mode. Since the AoT mode is almost as quick as JIT now, I'd recommend using it during development too, so you get instant feedback if a problem occurs. For more information, see this SO answer.

Angular 6 - production build failed because of NGRX

1 Answers1