CODEWITHSUNDEEP
angularangular2-routingangular2-templaterouter-outlet
Cédric Rémond
Cédric Rémond

Reputation: 1054

Cannot find primary outlet to load (login page and all other pages) in Angular 2

In the app.component.html, I have put a condition to decide which kind of template to use:

<div *ngIf="_appService.titleName !== 'Login'">
    <router-outlet></router-outlet>
</div>
<div ngIf="_appService.titleName === 'Login'">
    <login></login>
</div>

I'm trying to redirect an user to the main page of the application once he's logged in. To do so I use this:

this._appService.titleName === 'Main page';
this._router.navigate(['/']);

By using this I get this error :

Cannot find primary outlet to load 'MainComponent'

This is disturbing me, because I do the exact same thing in the other way for logout (redirecting from the main page to a login page) and it works all fine.

I read some similar answers, but none of them helped me so far, because I don't want to add a router-outlet tag in my login.component.html, since the main page is not a child component of the login one.

I think my problem is that I should use two router-outlets instead of the login selector, but I cannot get it to work properly.

My app.routing.ts :

const appRoutes: Routes = [
    {
        path:'login',
        component: LoginComponent
    },
    {
        path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard]
    },
    {
        path:'',
        redirectTo:'/main',
        pathMatch:'full'
    },
    {
        path: '**',
        redirectTo: ''
    }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

Upvotes: 0

Views: 836

Answers (2)

Roman C
Roman C

Reputation: 1

You can use named router outlet

<div *ngIf="_appService.titleName === 'Login'">
    <router-outlet name="login"></router-outlet>
</div>

and route

{
    path:'login',
    component: LoginComponent,
    outlet: 'login'
},

For more info see how to add a secondary route.

Upvotes: 0

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37393

don't use this in your template: 

<div *ngIf="_appService.titleName !== 'Login'">
    <router-outlet></router-outlet>
</div>
<div ngIf="_appService.titleName === 'Login'">
   <login></login>
</div>

Upvotes: 0

Related Questions