2

I'm working with Angular 8 and I have a login modal with a link to the signup modal, and vice-versa. Both modals are opened from the authService. The problem is that the authService needs a reference to the login and signup components in order to open them. I just can't find a way to avoid the circular dependency there.

I searched google and stackoverflow and the best solution I found was to deactivate circular dependency warnings in the angular.json file, which is not the solution I'm looking for. I shorten the 3 relevant files to only show the relevant code. It's all working fine, I just want to get rid of the error message and not face any unexpected problems later on and I try to find out what the correct way is of doing this.

export class AuthService {
  loginModalRef: MatDialogRef<LoginComponent>;
  signupModalRef: MatDialogRef<SignupComponent>;

  constructor(
    private dialog: MatDialog
    ) {}

  closeLoginModal(): void {
    this.loginModalRef.close();
  }

  closeSignupModal(): void {
    this.signupModalRef.close();
  }

  openLoginModal(): void {
    if (this.signupModalRef) {
      this.closeSignupModal();
    }
    this.loginModalRef = this.dialog.open(LoginComponent, {panelClass: 'login-dialog'});
  }

  openSignupModal(): void {
    if (this.loginModalRef) {
      this.closeLoginModal();
    }
    this.signupModalRef = this.dialog.open(SignupComponent, {panelClass: 'signup-dialog'});
  }
}


export class LoginComponent implements OnInit {
  loginForm: FormGroup;

  constructor(
    private authService: AuthService
  ) {}

//when user clicks on 'Signup instead'
  openSignupModal() {
    this.authService.openSignupModal();
  }
}



@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
  constructor(
    private authService: AuthService
  ) {}

// when user clicks on 'Login instead'
  openLoginModal() {
    this.authService.openLoginModal();
  }

// when user clicks on 'Terms of Services' the modal closes
  closeSignupModal() {
    this.authService.closeSignupModal();
  }
}

This is the error message:

WARNING in Circular dependency detected: src\app\auth\auth.service.ts -> src\app\auth\login\login.component.ts -> src\app\auth\auth.service.ts

WARNING in Circular dependency detected: src\app\auth\login\login.component.ts -> src\app\auth\auth.service.ts -> src\app\auth\login\login.component.ts

WARNING in Circular dependency detected: src\app\auth\signup\signup.component.ts -> src\app\auth\auth.service.ts -> src\app\auth\signup\signup.component.ts

1
  • Ignore them IMO; in your case they wont cause issues. Commented Aug 12, 2019 at 19:41

1 Answer 1

2

you should probably restructure your app a bit here so that your login and signup components are wrapped by a modal component.

@Component({
  template: `<app-login></app-login>`
})
export class LoginModalComponent { .. whatever in here, maybe something useful .. }

then your service would instantiate the LoginModalComponent

this.loginModalRef = this.dialog.open(LoginModalComponent, {panelClass: 'login-dialog'});

this avoids the circular dependency of LoginComponent -> AuthService and AuthService -> LoginComponent,

now its LoginModalComponent -> AuthService -> LoginComponent

the wrapper component can likely also take some of the logic inside your login component for better modularity.

another option is a sort of remote service that gets injected into auth service and the login component

@Injectable()
export class ModalRemoteService {
  private closeLoginSource = new Subject();
  closeLogin$ = this.closeLoginSource.asObservable();
  private openLoginSource = new Subject();
  openLogin$ = this.openLoginSource.asObservable();

  closeLoginModal(): void {
    this.closeLoginSource.next();
  }

  openLoginModal(): void {
    this.openLoginSource.next();
  }
}

and auth service subscrsibes to these signals and login / signup component triggers them, this way you no longer need to inject auth into login.

You generally have a structural issue where you're using a service to instantiate and destroy components from within the components that you must solve somehow. generally with wrappers or remotes.

1
  • Thanks a lot, the first approach worked like a charm. For anybody who's facing the same problem, don't forget to change your entry components to the new created modal components. I first tried the 2nd approach but somehow stuck because I didn't quite understand how that would work. Just to clarify, I need to inject the authservice into login and signup, because I have all the other logic there. Also, I'm triggering the modals from many different places, like the auth-guard for example. How exactly does the 2nd approach work? can you ellaborate?
    – Alex G.
    Commented Aug 13, 2019 at 0:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.