Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
613 views
in Technique[技术] by (71.8m points)

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

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]: 
  StaticInjectorError(Platform: core)[options]: 
    NullInjectorError: No provider for options!
_NullInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1218:19
resolveToken@webpack-internal:///../../../core/esm5/core.js:1516:17
tryResolveToken@webpack-internal:///../../../core/esm5/core.js:1458:16
StaticInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1326:20
resolveToken@webpack-internal:///../../../core/esm5/core.js:1516:17
tryResolveToken@webpack-internal:///../../../core/esm5/core.js:1458:16
StaticInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1326:20
resolveNgModuleDep@webpack-internal:///../../../core/esm5/core.js:11065:12
_createClass@webpack-internal:///../../../core/esm5/core.js:11102:29
_createProviderInstance$1@webpack-internal:///../../../core/esm5/core.js:11076:26
resolveNgModuleDep@webpack-internal:///../../../core/esm5/core.js:11061:17
_…"
?
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
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
"
?
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);
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...