Angular 6 StaticInjectorError: No provider for Options

Question

I have recently updated my project from Angular5 to Angular6. The project is building successfully but I am getting the following error in the browser console:

Unhandled Promise rejection: StaticInjectorError(AppModule)[options]: StaticInjectorError(Platform: core)[options]: NullInjectorError: No provider for options! ; Zone: ; Task: Promise.then ; Value: Error: StaticInjectorError(AppModule)[options]

Any idea on how to debug these issues?

Here's my app.module:

import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { CookieModule } from 'ngx-cookie';
import { PushNotificationsModule, PushNotificationsService } from 'ng-push';

// importing notifications module (angular 2 notifications)
import { SimpleNotificationsModule, NotificationsService } from 'angular2-notifications';

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';

import { NgProgressModule } from '@ngx-progressbar/core';
import { NgProgressHttpClientModule } from '@ngx-progressbar/http-client';

import { GridModule } from './shared-modules/grid-module/grid.module';

// importing components
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { SampleRouteComponent } from './pages/sample-route/sample-route.component';

// services
import { GtmService } from './services/gtm/gtm.service';
import { AuthGuardService } from './services/auth-guard/auth-guard.service';
import { LoginService } from './services/login-service/login.service';
import { UserInfoService } from './services/user-info/user-info.service';
import { UtilityService } from './services/utility/utility.service';
import { IdleService } from './services/idle/idle.service';
import { GenericGridService } from './shared-modules/grid-module/generic-grid.service';
import { HttpInterceptorService } from './services/http-interceptor/http-interceptor.service';
import { ModalProviderService } from './services/modal-provider/modal-provider.service';
import { NotificationServiceService } from './services/notification-service.service';
import { Api } from './services/api';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'sample-route',
    component: SampleRouteComponent
  },
  {
    path: '',
    loadChildren: './shared-modules/container/container.module#ContainerModule',
    canLoad: [AuthGuardService]
  }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SampleRouteComponent
  ],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: false }),
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    GridModule,
    SimpleNotificationsModule,
    CookieModule.forRoot(),
    NgIdleKeepaliveModule.forRoot(),
    NgProgressModule.forRoot(),
    NgProgressHttpClientModule,
    RouterModule.forRoot(routes, { initialNavigation: 'enabled' }),
    PushNotificationsModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    },
    GtmService,
    LoginService,
    AuthGuardService,
    UserInfoService,
    UtilityService,
    IdleService,
    ModalProviderService,
    NotificationsService,
    GenericGridService,
    NotificationServiceService,
    Api,
    PushNotificationsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

  private loginObserver;

  constructor(private loginService: LoginService, private utilityService: UtilityService, private idleService: IdleService,
    private userInfoService: UserInfoService) {
    this.loginService.checkLoggedIn();
    this.loginObserver = this.loginService.loginObserver.subscribe(
      loggedIn => {
        if (loggedIn) {
          const userdata: any = this.userInfoService.getUserInfo();
          this.utilityService.createNotification({
            title: 'Welcome!!',
            content: `${userdata.vchDiplayName}`
          });
          this.idleService.reset();
          this.loginObserver.unsubscribe();
        }
      }
    );
  }

}

Answer 1

Can the problem be that you have a non static service? If you have a non static service you must specifiy it as a provider in the Component that uses it. It is not enough to specify it as a provider in the app.modules.ts

Non static service

Remove the injectable directive in the service (Usually looks like this)

@Injectable({
   providedIn: 'root'
})

In the Component that uses the non static service

Add the providers attribute and specify the service. You need to import it too, just as you have to do with regular services as well.

import { EntryQueueHub } from 'app/services/hubs/entry-queue.hub';
@Component({
  selector: 'app-image-viewer',
  templateUrl: './image-viewer.component.html',
  styleUrls: ['./image-viewer.component.scss'],
  providers: [EntryQueueHub]
})
...
  constructor (
    private entryQueueHub: EntryQueueHub,
    ...

Answer 2

This might be late for OP but I was able to solve this issue by:

Adding the necessary service to my providers list under the app.module.ts

Hope this helps those in the future who are about to encounter this issue.

Answer 3

Can you try changing the import of SimpleNotificationsModule as SimpleNotificationsModule.forRoot() I was running into the same error and changing it this way fixed it for me.

Answer 4

Adding the service under providers of app.module does solves the problem