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

angular angular5
techkuz picture techkuz · Apr 11, 2018 · Viewed 124.8k times · Source

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

Answer

Emerica picture Emerica · Apr 11, 2019

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

Related questions

Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found

When running the terminal commands ng server or ng serve --live-reload=true, I'm getting this issue: The serve command requires to be run in an Angular project, but a project definition could not be found.

Read More
How to add CORS request in header in Angular 5

I have added the CORS in header but I am still getting the CORS issue in my request. What is the correct way to add and handle CORS and other requests in the headers? Here is service file code: import { …

Read More
Set focus on <input> element

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused. I have tried a few ways found on StackOverflow …

Read More