无法实例化循环依赖关系！AuthService ( "[ERROR ->]" )： 在 NgModule AppModule in ./AppModule@-1：-1 中

Question

>获取错误

compiler.js:11472 Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! AuthService ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
at NgModuleProviderAnalyzer.push../node_modules/@angular/compiler/fesm5/compiler.js.NgModuleProviderAnalyzer.parse (compiler.js:11472)
at NgModuleCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.NgModuleCompiler.compile (compiler.js:11836)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModule (compiler.js:23882)
at compiler.js:23841
at Object.then (compiler.js:1007)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23799)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4352)
at Object../src/main.ts (main.ts:11)

我的应用程序模块代码是：-

import { environment } from './../environments/environment'
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import {ProductsComponent } from './products/products.component';
import { ShoppingCartComponent } from './shopping-cart/shopping- 
cart.component';
import {CheckOutComponent } from './check-out/check-out.component';
import { OrderSuccessComponent } from './order-success/order- 
success.component';
import { MyOrdersComponent } from './my-orders/my-orders.component';
import { LoginComponent } from './login/login.component';
import { AdminProductsComponent } from './admin/admin-products/admin-products.component';
import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component';
import { AppComponent } from './app.component';
import { BtNavbarComponent } from './bt-navbar/bt-navbar.component';
import { AuthService } from './auth.service';
import { AuthGaurd } from 'src/app/auth-gaurd.service';
import { UserService } from './user.service';
import { AdminAuthGaurd } from './admin-auth-gaurd.service';
@NgModule({
declarations: [
AppComponent,
BtNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckOutComponent,
OrderSuccessComponent,
MyOrdersComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
NgbModule.forRoot(),
AngularFireAuthModule,
RouterModule.forRoot([{
path: '',
component: HomeComponent
},
{
path: 'products',
component: ProductsComponent
},
{
path: 'shopping-cart',
component: ShoppingCartComponent
},
{
path: 'login',
component: LoginComponent
},
{
path: 'check-out',
component: CheckOutComponent,
canActivate: [AuthGaurd]
},
{
path: 'order-success',
component: OrderSuccessComponent,
canActivate: [AuthGaurd]
},
{
path: 'my/orders',
component: MyOrdersComponent,
canActivate: [AuthGaurd]
},
{
path: 'admin/products',
component: AdminProductsComponent,
canActivate: [AuthGaurd, AdminAuthGaurd]
},
{
path: 'admin/orders',
component: AdminOrdersComponent,
canActivate: [AuthGaurd, AdminAuthGaurd]
},
])
],
providers: [
AuthService,
AuthGaurd,
UserService,
AdminAuthGaurd
],
bootstrap: [AppComponent]
})
export class AppModule {}

这是身份验证服务代码：------

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { Observable } from 'rxjs/Observable';
import { ActivatedRoute } from '@angular/router';
import { UserService } from './user.service';
import { AppUser } from './models/app-user';
import 'rxjs/add/operator/switchMap';
@Injectable()
export class AuthService {
user$: Observable < firebase.User > ;
constructor(private userService: UserService,
private afAuth: AngularFireAuth,
private auth: AuthService,
private route: ActivatedRoute) {
this.user$ = afAuth.authState;
}
login() {
let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
localStorage.setItem('returnUrl', returnUrl);
this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
}
logout() {
this.afAuth.auth.signOut();
}
get appUser$(): Observable < AppUser > {
return this.auth.user$
.switchMap(user => this.userService.get(user.uid).valueChanges());
}

}

Answer 1

循环依赖，意味着无休止地绕着，就像行星绕太阳运行一样。

解决方案：打破依赖链，重构代码。

从AuthService的依赖中删除AuthService(无论如何它都没有使用，如果您需要它，请找到不同的方法来绕过它。

改变：

constructor(private userService:UserService,
private afAuth: AngularFireAuth,
private auth:AuthService,
private route:ActivatedRoute) { 
this.user$ = afAuth.authState;
}

自：

constructor(private userService:UserService,
private afAuth: AngularFireAuth,
private route:ActivatedRoute) { 
this.user$ = afAuth.authState;
}

Answer 2

尽管错误说明了一切，但原因如下：

您正在将AuthService注入到创建循环依赖项AuthService中。因此错误。

看看你的AuthService的构造函数：

constructor(private userService: UserService,
private afAuth: AngularFireAuth,
private auth: AuthService,
private route: ActivatedRoute
) {
this.user$ = afAuth.authState;
}

就像AuthService不会实例化，直到它得到一个AuthService实例。您可以通过从构造函数中删除 AuthService 注入的依赖项来修复它：

constructor(
private userService: UserService,
private afAuth: AngularFireAuth,
private route: ActivatedRoute
) {
this.user$ = afAuth.authState;
}