angular2 Router-outlet wont work after logged in

Question

When im logged in, and navigate to otherpage or login i get the following error:

EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'customComponent'
Error: Cannot find primary outlet to load 'customComponent'

But when im not logged in, navigating works.

I also noticed that if i remove one of the router-outlets the navigation will work. Lets say i remove the router-outlet in loggedin, the navigation within user.username will work as normal.

How come? How can i make it work as it should? if not logged in, show router outlet there, else if im online, show it somewhere else?

Code:

 <div *ngIf="user.username">
   <a routerLink="/murder" routerLinkActive="active">Murder</a>
    <a routerLink="/login" routerLinkActive="active">Login</a>

    <div>
    <router-outlet></router-outlet>
    </div>
</div>
<div *ngIf="loggedin == false">
   <a routerLink="/murder" routerLinkActive="active">Murder</a>
    <a routerLink="/login" routerLinkActive="active">Login</a>

// other things
    <div>
    <router-outlet></router-outlet>
    </div>
</div>

Update:

i made the router-outlet in login to:

 <router-outlet name="regular"></router-outlet>

and outside:

        <router-outlet name="aux"></router-outlet>

and changed my routing:

   path: 'murder',
              component: MurderComponent,
              outlet: 'regular'

but when i navigate i get:

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'murder'

how come?

full code routing:

 RouterModule.forRoot([

              {
                  path: 'login',
                  component: LoginhandlerComponent,
                  outlet: 'aux'

              },

          {
              path: 'murder',
              component: MurderComponent,
              outlet: 'regular'

          },


          ]

      )

if you will use multiple router-outlet you need to give a name for tags. look at this http://stackoverflow.com/questions/34628848/angular2-multiple-router-outlet-in-the-same-template — Must.Tek, May 12 '17 at 12:32
sorry i didn't see you updated the code.I have looked again but i couldn't catch the point caused error. but i wonder where is your routerLink which routes to 'murder'. — Must.Tek, May 12 '17 at 13:04
updated @BlackEagle, the murder is changed from other to murder in the code. — maria, May 12 '17 at 13:09

score 1 · Accepted Answer · answered May 12 '17 at 13:30

1

You need add outlet to your router link. Try like this:

<a [routerLink]="['/', {outlets: {'regular': 'murder'}}]" routerLinkActive="active">Murder</a>

answered May 12 '17 at 13:30

Nedim Hozić

1,871
15
15

if i do that. i need also to do: { path: '', component: LoginhandlerComponent, outlet: 'outside', }, to handle when its not a path. but when im inside i cant use regular. is there a way to check if user is logged in before assigning ? – maria May 12 '17 at 13:52
You need to move also router-outlet (that without name) outside of ngIf statement. – Nedim Hozić May 12 '17 at 13:56

angular2 Router-outlet wont work after logged in

1 Answers1