未捕获(承诺):错误:StaticInjectorError(AppModule)[options]

时间:2018-04-11 13:34:00

标签: angular angular5

我有一个奇怪的错误。通常(我做谷歌搜索),在这种情况下,Angular在方括号中指定哪个模块/服务/提供者/等等引起了问题。但是在这里,它只说options

我尝试将HttpClientModule, HttpModule, Options添加到提供者/导入 - 没有成功。

尝试按照此调试指南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

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

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

8 个答案:

答案 0 :(得分:10)

这也可能是您尚未将依赖项注入服务声明为注入它的组件中的提供者。 那是我的情况:)

答案 1 :(得分:4)

我在使用我的类SharedModule时遇到了同样的问题。

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

然后我改变它直接放在app.modules中这样

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

Obs:我正在使用&#34; @ angular / core&#34;:&#34; ^ 6.0.2&#34;。

我希望它对你有所帮助。

答案 2 :(得分:4)

以下是对我有用的内容(角度7):

如果不这样做,请先在 app.module.ts 中导入 HttpClientModule

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

然后更改您的服务

@Injectable()
export class FooService {

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

希望有帮助。

答案 3 :(得分:2)

如果我们需要从一个组件移至另一服务,则必须将该服务定义到app.module provider数组中。

答案 4 :(得分:2)

我遇到了同样的错误,我通过在app.module.ts中导入HttpModule来解决了该问题

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

,然后在imports[]数组中:

HttpModule

答案 5 :(得分:1)

遇到相同的错误。就我而言,我做错的是我将服务(在我的情况下为DataService)注入了Component的构造函数中,但是我只是忘了将其导入组件中。

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

我错过了下面的导入代码。

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

答案 6 :(得分:1)

HttpClientModule必须位于imports数组中,并将其从提供程序中删除。该部分用于告诉Angular模块具有哪些服务(由您编写,而不是从库中导入)。

答案 7 :(得分:0)

就我而言,错误在于使用angular2-notifications 0.9.8而不是0.9.7