angular - 未捕获( promise ): Error: StaticInjectorError(AppModule)[options]

Question

我有一个奇怪的错误。通常(我做了我的谷歌搜索)，在这种错误的情况下，Angular 在方括号中指定正是模块/服务/提供商/等导致了问题。但是在这里，它只显示选项。

我尝试将 HttpClientModule, HttpModule, Options 添加到 providers/imports - 没有成功。

尝试遵循此调试指南 Debugging Unknown provider in minified angular javascript但它也让我一事无成(调用堆栈上没有 invoke，只是调用与 Zone 相关联)

我的 app.components.ts 看起来像这样:

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

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

Mozilla 控制台回溯:

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 控制台详细回溯(当我点击下拉按钮时):

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 控制台回溯:

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

当我进入 Debug模式时，调用错误的最后一个函数是:

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

Answer 1

这是对我有用的(Angular 7):

如果没有，请先在 app.module.ts 中导入 HttpClientModule:

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

然后改变你的服务

@Injectable()
export class FooService {

到

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

希望对您有所帮助。

编辑:

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.

小心 platform 仅在 Angular 9 ( https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3 )

之后可用

在这里阅读更多关于注入(inject)剂的信息:https://angular.io/api/core/Injectable