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();
        }
      }
    );
  }

}

You are missing to import a required service. Please show your code. — Ulrich Dohou, Jun 20 '18 at 11:00
One of the things going into "providers: [" is null. This could be a module import issue - You can use console.log to identify what one it is.... — Sam, Jun 21 '18 at 15:35
Possible duplicate of [Uncaught (in promise): Error: StaticInjectorError(AppModule)\[options\]](https://stackoverflow.com/questions/49776562/uncaught-in-promise-error-staticinjectorerrorappmoduleoptions) — techkuz, Mar 15 '19 at 09:34

score 20 · Answer 1 · answered Aug 14 '18 at 07:19

20

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.

answered Aug 14 '18 at 07:19

Jero Dungog

379
1
10

1

But the idea is to avoid that by adding 'providedIn' in the Injectable, isn't it? – Ragul Parani Nov 15 '18 at 05:10

score 6 · Answer 2 · answered Nov 21 '18 at 09:57

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,
    ...

score 5 · Answer 3 · answered Nov 29 '18 at 12:06

5

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.

answered Nov 29 '18 at 12:06

Pooja Mule

431
3
11

score 3 · Answer 4 · answered Nov 14 '19 at 10:58

3

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

answered Nov 14 '19 at 10:58

Sasi Kumar M

2,440
1
23
23

score 1 · Answer 5 · answered Oct 11 '18 at 10:14

Missing some modules with static methods to configure the provider can also make same kind of issue.

For example consider, RouterTestingModule, it has a static method called withRoutes() to configure the provider.

From angular's compiler's and injector's point of view this can be seen as a missing token in the injector.

Angular 6 StaticInjectorError: No provider for Options

5 Answers5

Linked