Angular 6 StaticInjectorError: No provider for Options

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

        }

      }

    );

  }



}

edited Jun 21 '18 at 8:11

asked Jun 20 '18 at 9:42

Subham Dey

4114

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

Hi, do you find a solution for your issue ?

– Alrick
Jul 9 '18 at 14:36

@Alrick not yet. Still trying

– Subham Dey
Jul 10 '18 at 9:36

add a comment |

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

        }

      }

    );

  }



}

edited Jun 21 '18 at 8:11

asked Jun 20 '18 at 9:42

Subham Dey

4114

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

Hi, do you find a solution for your issue ?

– Alrick
Jul 9 '18 at 14:36

@Alrick not yet. Still trying

– Subham Dey
Jul 10 '18 at 9:36

add a comment |

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

        }

      }

    );

  }



}

edited Jun 21 '18 at 8:11

asked Jun 20 '18 at 9:42

Subham Dey

4114

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

        }

      }

    );

  }



}

angular angular6

edited Jun 21 '18 at 8:11

asked Jun 20 '18 at 9:42

Subham Dey

4114

edited Jun 21 '18 at 8:11

asked Jun 20 '18 at 9:42

Subham Dey

4114

edited Jun 21 '18 at 8:11

asked Jun 20 '18 at 9:42

Subham Dey

4114

asked Jun 20 '18 at 9:42

Subham Dey

4114

asked Jun 20 '18 at 9:42

Subham Dey

4114

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

Hi, do you find a solution for your issue ?

– Alrick
Jul 9 '18 at 14:36

@Alrick not yet. Still trying

– Subham Dey
Jul 10 '18 at 9:36

add a comment |

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

Hi, do you find a solution for your issue ?

– Alrick
Jul 9 '18 at 14:36

@Alrick not yet. Still trying

– Subham Dey
Jul 10 '18 at 9:36

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

Hi, do you find a solution for your issue ?

– Alrick
Jul 9 '18 at 14:36

@Alrick not yet. Still trying

– Subham Dey
Jul 10 '18 at 9:36

add a comment |

4 Answers
4

active

oldest

votes

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 7:19

Jero Dungog

915

But the idea is to avoid that by adding 'providedIn' in the Injectable, isn't it?

– Ragul Parani
Nov 15 '18 at 5:10

add a comment |

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

314

This worked for me as well

– Teebo
Dec 31 '18 at 9:38

add a comment |

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.

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

add a comment |

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,

    ...

answered Nov 21 '18 at 9:57

Olof

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50945067%2fangular-6-staticinjectorerror-no-provider-for-options%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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 7:19

Jero Dungog

915

But the idea is to avoid that by adding 'providedIn' in the Injectable, isn't it?

– Ragul Parani
Nov 15 '18 at 5:10

add a comment |

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 7:19

Jero Dungog

915

But the idea is to avoid that by adding 'providedIn' in the Injectable, isn't it?

– Ragul Parani
Nov 15 '18 at 5:10

add a comment |

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 7:19

Jero Dungog

915

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 7:19

Jero Dungog

915

answered Aug 14 '18 at 7:19

Jero Dungog

915

answered Aug 14 '18 at 7:19

Jero Dungog

915

answered Aug 14 '18 at 7:19

Jero Dungog

915

But the idea is to avoid that by adding 'providedIn' in the Injectable, isn't it?

– Ragul Parani
Nov 15 '18 at 5:10

add a comment |

But the idea is to avoid that by adding 'providedIn' in the Injectable, isn't it?

– Ragul Parani
Nov 15 '18 at 5:10

But the idea is to avoid that by adding 'providedIn' in the Injectable, isn't it?

– Ragul Parani
Nov 15 '18 at 5:10

add a comment |

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

314

This worked for me as well

– Teebo
Dec 31 '18 at 9:38

add a comment |

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

314

This worked for me as well

– Teebo
Dec 31 '18 at 9:38

add a comment |

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

314

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

314

answered Nov 29 '18 at 12:06

Pooja

314

answered Nov 29 '18 at 12:06

Pooja

314

answered Nov 29 '18 at 12:06

Pooja

314

This worked for me as well

– Teebo
Dec 31 '18 at 9:38

add a comment |

This worked for me as well

– Teebo
Dec 31 '18 at 9:38

This worked for me as well

– Teebo
Dec 31 '18 at 9:38

add a comment |

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.

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

add a comment |

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.

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

add a comment |

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.

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

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.

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

answered Oct 11 '18 at 10:14

Tibin Thomas

1349

add a comment |

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,

    ...

answered Nov 21 '18 at 9:57

Olof

add a comment |

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,

    ...

answered Nov 21 '18 at 9:57

Olof

add a comment |

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,

    ...

answered Nov 21 '18 at 9:57

Olof

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,

    ...

answered Nov 21 '18 at 9:57

Olof

answered Nov 21 '18 at 9:57

Olof

answered Nov 21 '18 at 9:57

Olof

answered Nov 21 '18 at 9:57

Olof

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu