Angular 6 StaticInjectorError：没有选项提供者答案

【问题标题】：Angular 6 StaticInjectorError: No provider for OptionsAngular 6 StaticInjectorError：没有选项提供者
【发布时间】：2018-11-29 09:37:30
【问题描述】：

我最近将我的项目从 Angular5 更新到了 Angular6。该项目正在成功构建，但我在浏览器控制台中收到以下错误：

未处理的承诺拒绝：StaticInjectorError(AppModule)[options]： StaticInjectorError（平台：核心）[选项]： NullInjectorError：没有选项提供者！ ;区域：;任务：Promise.then；值：错误：StaticInjectorError(AppModule)[options]

知道如何调试这些问题吗？

这是我的 app.module：

import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { CookieModule } from 'ngx-cookie';
import { PushNotificationsModule, PushNotificationsService } from 'ng-push';

// importing notifications module (angular 2 notifications)
import { SimpleNotificationsModule, NotificationsService } from 'angular2-notifications';

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';

import { NgProgressModule } from '@ngx-progressbar/core';
import { NgProgressHttpClientModule } from '@ngx-progressbar/http-client';

import { GridModule } from './shared-modules/grid-module/grid.module';

// importing components
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { SampleRouteComponent } from './pages/sample-route/sample-route.component';

// services
import { GtmService } from './services/gtm/gtm.service';
import { AuthGuardService } from './services/auth-guard/auth-guard.service';
import { LoginService } from './services/login-service/login.service';
import { UserInfoService } from './services/user-info/user-info.service';
import { UtilityService } from './services/utility/utility.service';
import { IdleService } from './services/idle/idle.service';
import { GenericGridService } from './shared-modules/grid-module/generic-grid.service';
import { HttpInterceptorService } from './services/http-interceptor/http-interceptor.service';
import { ModalProviderService } from './services/modal-provider/modal-provider.service';
import { NotificationServiceService } from './services/notification-service.service';
import { Api } from './services/api';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'sample-route',
    component: SampleRouteComponent
  },
  {
    path: '',
    loadChildren: './shared-modules/container/container.module#ContainerModule',
    canLoad: [AuthGuardService]
  }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SampleRouteComponent
  ],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: false }),
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    GridModule,
    SimpleNotificationsModule,
    CookieModule.forRoot(),
    NgIdleKeepaliveModule.forRoot(),
    NgProgressModule.forRoot(),
    NgProgressHttpClientModule,
    RouterModule.forRoot(routes, { initialNavigation: 'enabled' }),
    PushNotificationsModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    },
    GtmService,
    LoginService,
    AuthGuardService,
    UserInfoService,
    UtilityService,
    IdleService,
    ModalProviderService,
    NotificationsService,
    GenericGridService,
    NotificationServiceService,
    Api,
    PushNotificationsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

  private loginObserver;

  constructor(private loginService: LoginService, private utilityService: UtilityService, private idleService: IdleService,
    private userInfoService: UserInfoService) {
    this.loginService.checkLoggedIn();
    this.loginObserver = this.loginService.loginObserver.subscribe(
      loggedIn => {
        if (loggedIn) {
          const userdata: any = this.userInfoService.getUserInfo();
          this.utilityService.createNotification({
            title: 'Welcome!!',
            content: `${userdata.vchDiplayName}`
          });
          this.idleService.reset();
          this.loginObserver.unsubscribe();
        }
      }
    );
  }

}

【问题讨论】：

您缺少导入所需的服务。请出示您的代码。
进入“providers: [”的内容之一为空。这可能是模块导入问题 - 您可以使用 console.log 来确定它是什么......
您好，您的问题找到解决方案了吗？
@Alrick 还没有。还在尝试
Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]的可能重复

标签： angular angular6

【解决方案1】：

这对于 OP 来说可能已经晚了，但我能够通过以下方式解决这个问题：

将必要的服务添加到 app.module.ts

下的我的提供者列表中

希望这对将来遇到此问题的人有所帮助。

【讨论】：

但是我们的想法是通过在 Injectable 中添加 'providedIn' 来避免这种情况，不是吗？

【解决方案2】：

缺少一些带有静态方法来配置提供程序的模块也会产生同样的问题。

例如，RouterTestingModule，它有一个名为 withRoutes() 的静态方法来配置提供者。

从 Angular 的编译器和注入器的角度来看，这可以看作是注入器中缺少的标记。

【讨论】：

【解决方案3】：

问题可能是您有非静态服务吗？如果您有非静态服务，则必须将其指定为使用它的组件中的提供者。在 app.modules.ts 中将其指定为提供程序是不够的

非静态服务

去掉服务中的injectable指令（一般是这样的）

@Injectable({
   providedIn: 'root'
})

在使用非静态服务的组件中

添加 providers 属性并指定服务。您也需要导入它，就像您必须导入常规服务一样。

import { EntryQueueHub } from 'app/services/hubs/entry-queue.hub';
@Component({
  selector: 'app-image-viewer',
  templateUrl: './image-viewer.component.html',
  styleUrls: ['./image-viewer.component.scss'],
  providers: [EntryQueueHub]
})
...
  constructor (
    private entryQueueHub: EntryQueueHub,
    ...

【讨论】：

【解决方案4】：

您可以尝试将 SimpleNotificationsModule 的导入更改为 SimpleNotificationsModule.forRoot() 我遇到了同样的错误并以这种方式更改它为我修复了它。

【讨论】：

【解决方案5】：

在app.module的providers下添加服务确实可以解决问题

【讨论】：