Angular 无法实例化循环依赖项！AuthService（"；[ERROR->；]"；）：在NgModule-AppModule中。/AppModule@-1:-1

获取错误

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)

我的AppModule代码是：-

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 {}

以下是AuthService代码：------

从'@angular/core'导入{Injectable}；
从'angularfire2/auth'导入{AngularFireAuth}；
从“firebase”导入*作为firebase；
从“rxjs/Observable”导入{Observable}；
从'@angular/router'导入{ActivatedRoute}；
从“/user.service”导入{UserService}；
从“./models/app user”导入{AppUser}；
导入'rxjs/add/operator/switchMap'；
@可注射（）
导出类身份验证服务{
用户$：可观察；
构造函数（私有用户服务：用户服务，
私人afAuth:AngularFireAuth，
私有身份验证：身份验证服务，
专用路由：ActivatedRoute）{
this.user$=afAuth.authState；
}
登录（）{
让returnUrl=this.route.snapshot.queryParamMap.get（'returnUrl'）| |'/'；
setItem（'returnUrl'，returnUrl）；
this.afAuth.auth.signInWithRedirect（new firebase.auth.GoogleAuthProvider（））；
}
注销（）{
this.afAuth.auth.signOut（）；
}
获取appUser$（）：可观察{
返回this.auth.user$
.switchMap（user=>this.userService.get（user.uid.valueChanges（））；
}
}

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

您正在将

AuthService

注入到

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;
}

这就像

AuthService

在得到

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;
}

---

循环依赖性，意味着围绕无尽的行星旋转，就像围绕太阳旋转的行星一样

解决方案：打破依赖链，重新考虑代码

从

AuthService

的依赖项中删除

AuthService

（如果您需要它，无论如何都不会使用它，然后找到不同的方法来解决。）

更改：

constructor(private userService:UserService,
              private afAuth: AngularFireAuth,
              private auth:AuthService,
               private route:ActivatedRoute) { 

    this.user$ = afAuth.authState;
}

致：