我遇到错误无法实例化循环依赖性! ApplicationRef(“ [ERROR->]”):在./AppModule@-1:-1 的NgModule AppModule中,但我看不出问题出在哪里。您能否提一些建议?我是Angular 2的新手,问题似乎出在 provider 部分的NgModule中的 app.module.ts 文件中,其中是 APP_INITIALIZER 。只要将 AuthenticationService 添加到 deps 部分中,它就会发生。当我删除 APP_INITIALIZER 定义时,它消失了。非常感谢。
文件app.module.ts:
export function fetchAuthenticatedUser(authService: AuthenticationService): Function {
return () => authService.fetchAuthenticatedUser();
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
CoreModule,
AppRoutingModule,
],
providers: [
HttpClient,
{
provide: APP_INITIALIZER,
useFactory: fetchAuthenticatedUser,
deps: [AuthenticationService], // !!! The problem seems to be caused by this dependency. If I remove entire APP_INITIALIZER definition from providers it disappears.
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
文件core.module.ts:
@NgModule({
imports: [
CommonModule,
FormsModule
],
providers: [
AuthenticationService,
OAuthTokenService,
AuthenticationGuard,
ApiService,
{
provide: HTTP_INTERCEPTORS,
useClass: OauthInterceptor,
deps: [AuthenticationService],
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorInterceptor,
deps: [AuthenticationService, NotificationsService],
multi: true
}
],
declarations: [
HeaderComponent
],
exports: [
HeaderComponent
]
})
export class CoreModule {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error(`${parentModule} has already been loaded. Import Core module in the AppModule only.`);
}
}
}
文件authentication.service.ts:
@Injectable()
export class AuthenticationService implements OnInit {
constructor(private tokenService: OAuthTokenService, private api: ApiService, private router: Router) { }
...
}
oauth-token.service.ts文件:
@Injectable()
export class OAuthTokenService {
constructor() { }
...
}
文件api.service.ts:
@Injectable()
export class ApiService {
constructor(private configService: ConfigurationService, private http: HttpClient, private tokenService: OAuthTokenService, private router: Router) { }
}
文件configuration.service.ts:
@Injectable()
export class ConfigurationService {
private config: Configuration; // A plain class (value object)
constructor(private http: HttpClient) {}
static startupServiceFactory(configService: ConfigurationService): Function {
return () => configService.load();
}
load() {
...
}
}
文件package.json:
{
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"angular2-notifications": "^1.0.2",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}