Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]

Question

I have a strange error. Usually (I did my googling), in this case of errors Angular specifies in square brackets which exactly module/service/provider/etc caused the problem. However here, it says only options.

I tried adding HttpClientModule, HttpModule, Options to providers/imports - no success.

Tried to follow this debugging guide Debugging Unknown provider in minified angular javascript but also it brought me to nothing (no invoke on the call stack, just invokes associated with Zone)

my app.components.ts looks like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
})
export class AppComponent {
  constructor() {}
}

Mozilla console traceback:

Error: [object Object]
Stack trace:
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:783:31
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:754:17
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:831:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4952:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:423:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:191:28
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:502:21
invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1370:9
globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1388:17

Mozilla console detailed traceback (when I click on the dropdown button):

Error

columnNumber: 31

fileName: "http://localhost:4100/polyfills.bundle.js line 733 > eval"

lineNumber: 783

message: "Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]: \n  StaticInjectorError(Platform: core)[options]: \n    NullInjectorError: No provider for options!\n_NullInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1218:19\nresolveToken@webpack-internal:///../../../core/esm5/core.js:1516:17\ntryResolveToken@webpack-internal:///../../../core/esm5/core.js:1458:16\nStaticInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1326:20\nresolveToken@webpack-internal:///../../../core/esm5/core.js:1516:17\ntryResolveToken@webpack-internal:///../../../core/esm5/core.js:1458:16\nStaticInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1326:20\nresolveNgModuleDep@webpack-internal:///../../../core/esm5/core.js:11065:12\n_createClass@webpack-internal:///../../../core/esm5/core.js:11102:29\n_createProviderInstance$1@webpack-internal:///../../../core/esm5/core.js:11076:26\nresolveNgModuleDep@webpack-internal:///../../../core/esm5/core.js:11061:17\n_…"

promise: Object { __zone_symbol__state: 0, __zone_symbol__value: Error }

rejection: Error: StaticInjectorError(AppModule)[options]: 
  StaticInjectorError(Platform: core)[options]: 
    NullInjectorError: No provider for options!
Stack trace:
[object Object]

stack: "resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:783:31\nresolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:754:17\nscheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:831:17\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17\nonInvokeTask@webpack-internal:///../../../core/esm5/core.js:4952:24\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:423:17\nZone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:191:28\ndrainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25\nZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:502:21\ninvokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1370:9\nglobalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1388:17\n"

task: Object { runCount: 0, _state: "notScheduled", type: "microTask", … }

zone: Object { _properties: {…}, _parent: {…}, _name: "angular", … }

__proto__: Object { … }

Google chrome console traceback:

core.js:1448 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]: 
  StaticInjectorError(Platform: core)[options]: 
    NullInjectorError: No provider for options!
Error: StaticInjectorError(AppModule)[options]: 
  StaticInjectorError(Platform: core)[options]: 
    NullInjectorError: No provider for options!
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10849)
    at _createClass (core.js:10886)
    at _createProviderInstance$1 (core.js:10860)
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10849)
    at _createClass (core.js:10886)
    at _createProviderInstance$1 (core.js:10860)
    at resolvePromise (zone.js:783)
    at resolvePromise (zone.js:754)
    at eval (zone.js:831)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.js:4736)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1370)
defaultErrorLogger @ core.js:1448

When I go into debugging mode the last function calling the error is :

function defaultErrorLogger(console) {
    var values = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        values[_i - 1] = arguments[_i];
    }
    console.error.apply(console, values);
}

Also, my guess is that you use `initFactory` : sometimes using function calls create issues like that (I remember stumbling upon similar questions). Could you try to get rid of that function ? — , Apr 11 '18 at 13:45
@trichetriche, unfortunately, I cannot. However, this error happens before any interaction with the page, so probably, component logic is not the case. The error happens during the load (nothing is displayed on the screen, just an error in the console). — techkuz, Apr 11 '18 at 13:59
That's because you miss a dependency providing. Could you just at least give the signature of your login component constructor ? This error happens because one of your dependencies in your module requires `options`, and you didn't import it. The compiler doesn't see that as an issue, but Angular does, once compiled. — , Apr 11 '18 at 14:01
I'm having same problem, but I'm using "@angular/core": "^6.0.2" — Ricardo G Saraiva, May 28 '18 at 02:28

Emeric · Answer 1 · 2020-02-14T09:13:15.713

84

Here is what worked for me (Angular 7):

First import HttpClientModule in your app.module.ts if you didn't:

import { HttpClientModule } from '@angular/common/http';
...
imports: [
        HttpClientModule
    ],

Then change your service

@Injectable()
export class FooService {

to

@Injectable({
    providedIn: 'root'
})
export class FooService {

Hope it helps.

Edit:

providedIn

Determines which injectors will provide the injectable, by either associating it with an @NgModule or other InjectorType, or by specifying that this injectable should be provided in one of the following injectors:

'root' : The application-level injector in most apps.

'platform' : A special singleton platform injector shared by all applications on the page.

'any' : Provides a unique instance in every module (including lazy modules) that injects the token.

Be careful platform is available only since Angular 9 (https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3)

Read more about Injectable here: https://angular.io/api/core/Injectable

edited Feb 14 '20 at 09:13

answered Apr 11 '19 at 18:01

Emeric

6,315
2
41
54

2

That worked for me (@Injectable) with Angular 7. Thanks a lot! – Marcin Janowski Jun 03 '19 at 19:47
Seconding - this fixed the same problem for me in Angular 7 – user1288395 Jun 04 '19 at 20:30
Why does this work instead of adding the service in the providers section? – DragonBeer Sep 25 '19 at 20:07
"Beginning with Angular 6.0, the preferred way to create a singleton service is to set providedIn to root on the service's @Injectable() decorator. This tells Angular to provide the service in the application root." – Emeric Oct 09 '19 at 13:46

score 15 · Answer 2 · answered Dec 14 '18 at 08:16

15

It also might be that you haven't declared you Dependency Injected service, as a provider in the component that you injected it to. That was my case :)

answered Dec 14 '18 at 08:16

azrahel

1,143
2
13
31

divyanshu gupta · Answer 3 · 2019-01-04T10:04:20.853

7

If we need to move from one component to another service then we have to define that service into app.module providers array.

edited Jan 04 '19 at 10:04

answered Jan 04 '19 at 09:53

divyanshu gupta

127
1
3
14

score 6 · Answer 4 · edited Jul 23 '18 at 17:31

6

I was having the same problem using my class SharedModule.

export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [MyService]
         }
     }
}

Then I changed it putting directly in the app.modules this way

@NgModule({declarations: [
AppComponent,
NaviComponent],imports: [BrowserModule,RouterModule.forRoot(ROUTES),providers: [MoviesService],bootstrap: [MyService] })

Obs: I'm using "@angular/core": "^6.0.2".

I hope its help you.

edited Jul 23 '18 at 17:31

Ash

672
6
21

answered May 28 '18 at 03:07

Ricardo G Saraiva

169
1
10

1

I am not getting your point. How did you solve that? And why did it fix the issue? – Matt Dec 14 '18 at 15:43

score 5 · Answer 5 · answered Jan 23 '19 at 12:15

5

I had the same error and I solved it by importing HttpModule in app.module.ts

import { HttpModule } from '@angular/http';

and then in the imports[] array:

HttpModule

answered Jan 23 '19 at 12:15

mohamed saad

75
2
9

score 2 · Answer 6 · answered Feb 07 '19 at 17:07

Faced the same error. In my case , what i did wrong was that i injected the service(named DataService in my case) inside the constructor within the Component but I simply forgot to import it within the component.

 constructor(private dataService:DataService ) {
    console.log("constructor called");
  }

I missed the below import code.

import { DataService } from '../../services/data.service';

score 2 · Answer 7 · answered Feb 20 '19 at 10:54

2

HttpClientModule needs to be in the imports array, and remove it from providers. That section is for you to tell Angular which services the module has (written by you and not imported from a library).

answered Feb 20 '19 at 10:54

Ramki

158
6

techkuz · Answer 8 · 2019-02-13T11:02:38.147

0

In my case, the error was in using angular2-notifications 0.9.8 instead of 0.9.7

edited Feb 13 '19 at 11:02

answered Sep 04 '18 at 12:41

techkuz

3,608
5
34
62

1

Using "^0.9.7" is the same as using "0.*.*" - Meaning the last and middle digit will update on an npm install in the package.lock file. – Brad Bird Sep 15 '18 at 20:30

score 0 · Answer 9 · answered Mar 17 '22 at 11:23

I had gone through the same error/problem in Angular

Error Image with screenshoot
Error Description: I was trying to restrict route in customer guard by passing the data by resolve in App-routing-module. like this path: 'shiftalertsetting', component: ShiftAlertConfigComponent, resolve: {id: '23'}, canActivate: [CustomerGuard], and was getting continuously console error saying that

core.js:6014 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[23]:

Error solved with screenshoot
Solution Description: I replaced data instead of resolve in "App-routing-module" like this

path: 'shiftalertsetting', component: ShiftAlertConfigComponent, data: {id: Features.ShiftSetting}, canActivate: [CustomerGuard],

Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]

9 Answers9

Linked

Related