我最近将我的项目从 Angular5 更新到 Angular6。 项目已成功构建，但我在浏览器控制台中收到以下错误：
未处理的承诺拒绝：静态注入器错误(应用模块([选项]： StaticInjectorError(Platform： core([options]： 空注入器错误： 没有选项提供程序！ ;区：;任务：承诺;值： 错误： 静态注入器错误(应用模块([选项]
关于如何调试这些问题的任何想法？
这是我的应用程序模块：
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();
}
}
);
}
}
对于 OP 来说可能晚了，但我能够通过以下方式解决这个问题：
将必要的服务添加到 app.module.ts下的我的提供程序列表中
希望这对将来即将遇到此问题的人有所帮助。
问题可能是您有一个非静态服务吗？如果您有非静态服务，则必须在使用它的组件中将其指定为提供程序。在 app.modules.ts 中将其指定为提供程序是不够的
非静态服务
删除服务中的可注入指令(通常看起来像这样(
@Injectable({
providedIn: 'root'
})
在使用非静态服务的组件中
添加提供程序属性并指定服务。您也需要导入它，就像您还必须导入常规服务一样。
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,
...
你能尝试将SimpleNotificationsModule的导入更改为SimpleNotificationsModule.forRoot(( 我遇到了同样的错误，并以这种方式更改它为我修复了它。
在 app.module 的提供程序下添加服务确实解决了这个问题
缺少一些具有静态方法来配置提供程序的模块也会产生相同的问题。
例如，考虑 RouterTestingModule，它有一个称为 withRoutes(( 的静态方法来配置提供程序。
从 angular 的编译器和注入器的角度来看，这可以被视为注入器中缺少的标记。