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);

Continue reading...