NullInjectorError: No provider for t! NullInjectorError: StaticInjectorError(ba)[Cw -> t]:

Question

When I run my prod build of my Angular 8 app, I am getting this error in console. The build runs fine and I've included all services in my provider.

I've run the following commands but do not get any errors. ng build --prod --optimization=false Is there any way to tell what is failing? Even when I comment out all the providers (expecting the build the fail), I still receive no errors.

Please let me know what other information I can/should provide for your help. Thanks!

error message:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';

//a bunch more components...

import { AccountModule } from './account/account.module';
import { AccountRoutingModule } from './account/account.routing.module';
import { AuthGuard } from './helpers/auth.guard';
import { ErrorInterceptor } from './helpers/error.interceptor';
import { JwtInterceptor } from './helpers/jwt.interceptor';

import { TemplateService } from './services/template.service';
import { ExerciseService } from './services/exercise.service';
import { ExamService } from './services/exam.service';
import { AuthService } from './services/auth.service';
import { FeatureService } from './services/feature.service';
import { RoleService } from './services/role.service';
import { UserService } from './services/user.service';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,

  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AccountModule,
    AccountRoutingModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, canActivate: [AuthGuard] },
      //all routes left out for brevity
    ])
  ],
  //entryComponents: [NewTemplateModal, NewExerciseModal, AddFeaturesModal, SaveSuccessComponent, ErrorComponent],
  providers: [    
    AuthService,
    ExamService,
    ExerciseService,
    FeatureService,
    RoleService,
    TemplateService,
    UserService,
    HttpClient,
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

build:

Answer 1

Turns out it was something stupid...

In one of my components I had providers:[]. Once I removed that completely it started working.

Hope this can help someone else!

Answer 2

@Injectable({
    providedIn: 'root'
})
export interface Cars {
    number: number;
    model: string;
    owner: string;
    ownerPhone: string;
}

For me the error was my @decorator was invalid in Service

Answer 3

In my case the error was occuring on the main page load itself and was not able to identify the missing one as it was not showing any details. So, firstly for identifying it I commented as below in "node_modules@angular-devkit\build-angular\src\webpack\configs\common.js"

See image here

And then I was able to see the missing one in the error! and after importing and adding it to imports, it worked for me! :)