我最近将我的项目从Angular5更新为Angular6 . 该项目正在成功构建,但我在浏览器控制台中收到以下错误:
未处理的Promise拒绝:StaticInjectorError(AppModule)[options]:StaticInjectorError(Platform:core)[options]: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();
}
}
);
}
}
4 回答
这可能是OP的迟到但我能够通过以下方式解决这个问题:
将必要的服务添加到 app.module.ts 下的提供者列表中
希望这有助于未来即将遇到此问题的人 .
缺少一些使用静态方法配置提供程序的模块也会产生同样的问题 .
例如,考虑RouterTestingModule,它有一个名为withRoutes()的静态方法来配置提供者 .
从angular的编译器和喷射器的角度来看,这可以看作是喷射器中的缺失标记 .
问题是你有非静态服务吗?如果您有非静态服务,则必须将其指定为使用它的组件中的提供程序 . 仅在app.modules.ts中将其指定为提供者是不够的
Non static service
删除服务中的injectable指令(通常看起来像这样)
In the Component that uses the non static service
添加providers属性并指定服务 . 您也需要导入它,就像您必须使用常规服务一样 .
您可以尝试将SimpleNotificationsModule的导入更改为SimpleNotificationsModule.forRoot()我遇到了同样的错误,并通过这种方式更改它为我修复它 .