How can I fix this circular dependency? (If that is what it is)

Question

compiler.js:2175 Uncaught Error: Can't resolve all parameters for AuthService: (?, ?, ?, ?).
at syntaxError (compiler.js:2175)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:20401)
at CompileMetadataResolver._getTypeMetadata (compiler.js:20296)
at CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:20514)
at CompileMetadataResolver.getProviderMetadata (compiler.js:20523)
at compiler.js:20461
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:20421)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:20148)
at JitCompiler._loadModules (compiler.js:25824)

I am getting this error ^^ and I am confused. I am fairly new to web development. From the research I have done it is caused by a circular dependency. How can I fix this?

import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {

  authState: FirebaseAuthState = null;

  public token: any;

  constructor(private af: AngularFire, private db: AngularFireDatabase, private router: Router) {
    af.auth.subscribe((auth) => { this.authState = auth; })
  }

  get authenticated(): boolean {
    return this.authState !== null;
  }

  get currentUser(): any {
    return this.authenticated ? this.authState.auth : null;
  }

  get currentUserId(): string {
    return this.uthenticated ? this.authState.uid : '';
  }

  private socialSignIn(provider: number): firebase.Promise<FirebaseAuthState> {
    return this.af.auth.login({provider, method: AuthMethods.Popup})
      .then(() => this.updateUserData() )
      .catch(error => console.log(error));
  }

  private updateUserData(): void {

      let path = `users/${this.currentUserId}`;
      let data = {
        name: this.currentUser.displayName,
        email: this.currentUser.email,
      }

      this.db.object(path).update(data)
      .catch(error => console.log(error));
  }

  googleLogin(): firebase.Promise<FirebaseAuthState> {
    return this.socialSignIn(AuthProviders.Google);
  }

  signOut(): void {
    this.af.auth.logout();
    this.router.navigate(['/'])
  }
}

I have seen tons of posts about this but all of then use an injection or something. The other thing I have seen is people saying to use another service. How would I accomplish this?

Answer 1

You are getting this Error because when angular tries to create AuthService it searches for all the arguments that you have in its constructor

  constructor(private af: AngularFire, private db: AngularFireDatabase, private router: Router) {

It seems that you don't have imported AngularFire, AngularFireDatabase, Router

If when you do you also get those kind of errors, please make sure that all of the classes that injected into the Constructor are @Ingectables

If this doesn't help you as well you can check this answer https://stackoverflow.com/a/38000323/1037613 its seems related

Answer 2

Angular is unable to inject the dependencies you have given in your constructor. Manual way of doing it is wrong way of doing it in angular.

Add the parameters you have in the providers part in your module.

@NgModule({
...
providers: [AngularFire, AngularFireDatabase, Router]
...
})

I think this helps. and about circular dependency,

Circular Dependency: Its like you have A service which is dependent on B and B service again depends on A. This is called circular dependency

A -> B -> A