Невозможно создать циклическую зависимость! AuthService ("[ОШИБКА ->]"): в NgModule AppModule в ./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)

Код моего 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

Циклическая зависимость означает кружение вокруг бесконечной, как планеты, вращающиеся вокруг Солнца.

Решение: разорвать цепочку зависимостей, код Re-factor.

удалить 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;
}