0
<div *ngIf="!loggedIn" class="login">
  <router-outlet></router-outlet>
</div>

<div *ngIf="loggedIn" class="main">
  <router-outlet></router-outlet>
</div>

I have a login component (lives in class="login") and a dashboard (lives in class="main") component. I also have a register component that lives in the class="login" div. Now I know you're not suppose to use two <router-outlet> in the same template but if they're not showing at the same time, I don't see what the issue is. I've also tried to using the [routersLink]="[{outlets}]" method but it couldn't get it to work. Maybe because the <router-outlet> isn't shown due to the *ngIf.

So the issue is, when I go from the dashboard component, I see the login component. When I go from the login to the register component, the route updates but the register component doesn't fire. If I go straight from the login page to the register page, it routes and fires the register component.

turd.ferguson
  • 51
  • 1
  • 1
  • 8
  • You could probably solve it by using named outlets, check [this post](https://stackoverflow.com/questions/40077355/changing-router-outlet-with-ngif-in-app-component-html-in-angular2) – Mathias W Jan 25 '18 at 22:03
  • I've actually tried that and spend 2 hours to no avail. – turd.ferguson Jan 25 '18 at 22:21
  • Put the div.login *inside* the login and register component templates. Put the div.main *inside* the dashboard template. And there you go: a single router outlet. – JB Nizet Jan 25 '18 at 22:25

1 Answers1

0

I raise a similar question and found the following answer. See if this works for you,

Nate May
  • 3,814
  • 7
  • 33
  • 86