ANGULAR | Use two components with same route

Question

I need to use this route '/', but this route must use a component which is selected after auth validation.

I want to do what Facebook does. When you are about to log in, the URL is "facebook.com" and also is "facebook.com" when you are at the main page.

So, what I've been trying what is this answers says: https://stackoverflow.com/a/49095103/9588225

But the problem is that I get this error: "circular dependency injection" because of the injection in the matcher.

I would like to know if there is another way to inject a service in a function or if there is some way to validate that.

Thanks a lot.

Answer 1

It would probably be easier to keep the same component for the route and have two seperate child components and an *ngIf or something depending if a user has logged in or not

<login-component *ngIf="!userLoggedIn"></login-component>
<app-component *ngIf="userLoggedIn"></app-component>

This is just a basic example but you can extend from here

This way you have complete control over which component is shown over the route, and you don't have to worry about future versions of angular breaking your route configuration.