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)

我的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代码：------

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

循环依赖，意味着无休止地盘旋，就像行星绕着太阳公转。

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

从ChatParameters的依赖项中删除AuthService（无论如何，它都不使用，如果需要，请找到其他解决方法。）

更改：

AuthService

至：

constructor(private userService:UserService,
              private afAuth: AngularFireAuth,
              private auth:AuthService,
               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;
}

无法实例化循环依赖！ AuthService（“ [ERROR->]”）：在./AppModule@-1:-1中的NgModule AppModule中

2 个答案: