Navigate outside router-outlet

Question

I have followed the official documentation: https://angular.io/docs/ts/latest/guide/router.html

But when I want to navigate to LoginComponent inside the AuthGuard, I do not want to navigate inside the parent component (AppComponent) that holds router-outlet tag. I want to redirect the LoginComponent outside the parent component(AppComponent) that has router-outlet tag. As a single, stand-alone component LoginComponent, I do not want that the LoginComponent has the master html of the AppComponent.

Is this possible? how? Full example: http://plnkr.co/edit/34ajPEi1OucEXNw4L2Do?p=preview

Update: Also when I tried in the AppComponent.html to condition the router-outlet as the following:

<div *ngIf="isAuth()">
<h1 class="title">Head Router</h1>
<router-outlet></router-outlet>
</div>
<div *ngIf="!isAuth()"><app-login></app-login></div>

on the console I get the following error:

browser_adapter.ts:82EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'LoginComponent'

full error example: http://plnkr.co/edit/rEEZrB?p=preview

Please add more context, ideally a Plunker that allows to reproduce. I'm not able to make sens of your prose description. — Günter Zöchbauer
You're placing router-outlet inside ngIf directive and condition of ngIf equals false so your view doesn't have router-outlet — yurzui

user2832323 user2832323 · Accepted Answer · 2016-09-15T21:35:54

I think what you want is not possible. I think you would need to create another master html file and bootstrap your standalone component there. Then navigate to the url of this new file. Another option would be hiding the unwanted nodes (using *ngClass='{"hidden":is_login}' ) or something similar in your main component.

Navigate outside router-outlet

1 Answers