How to use multiple router-outlet in angular2?

Question

I have a main router-outlet, which is used to display a login screen (/login) and the main content screen(which is shown after login) (/main

Answer 1

So if I get the question right you want to have login screen initially and after the user logs in, you want him to see /main where navigation is shown. Both login screen and main application should have a different layout.

We have a similar case and using LayoutComponent. Here's simplified example.

// This is main component that get's bootstrapped that has 'top-level' router.
@Component({selector: 'app', template: '<router-outlet></router-outlet>'})
class AppComponent {}

// main router config
// Here AuthModule has router with login and logout configured and LoginGuard
// redirect the user to /auth/login when she is not authenticated.
// We're using lazy-loading but you can use direct component instead
export const APP_ROUTES: Routes = [
  {path: '', redirectTo: 'main', pathMatch: 'full'},
  {path: 'auth', loadChildren: '../modules/+auth/auth.module#AuthModule'},
  {
    path: '',
    component: LayoutComponent,
    canActivate: [LoginGuard],
    children: [
      {path: 'main', loadChildren: '../modules/+main/main.module#MainModule'}
    ]
  }
];

// AuthModule/LoginComponent has own template and it will be rendered
// into 'top-level' router-outlet.

// LayoutComponent
// Here you define your main application layout that can include navigation
// and anything else that are global to the app. It has another router-outlet
// that get rendered when the layout is accessible (which in this case when the user is authenticated).
@Component({
  selector: 'app-layout',
  template: `
    <div id="wrapper">
      <app-sidebar></app-sidebar>
      <div id="page-wrapper" class="gray-bg dashboard-1" adjust-content-height>
        <router-outlet></router-outlet>
      </div>
    </div>
    <notifications></notifications>
    <error-modal></error-modal>
  `
})
export class LayoutComponent {}

// Auth/LoginComponent can have its own template that will have different layout from the main application

So the flow would be like so:

• when the user tries to load / then she redirected to /main
• if the user is not authenticated she redirected to /auth/login else she loads /main

Hope that helps.

EDIT: Updated sickelap/ng-starter repository with example app that has:

• routing with lazy-loading
• layouts
• and other things

Answer 2

I think i gather what you are trying to achieve. Can i recommend that you use a variable to mimic some kind of state change, and assign that to the component view. have your app.component.html only contain a router outlet. create a new main.component.html that replicates the existing component.html

`<app-header></app-header>`

replace the href in the with *(click)="handleChange(<linkValue>)'"

So each link would look as below.

<ul class="nav navbar-nav"> <li class=""><a href="/main/overview">OVERVIEW</a></li>

handleChange method: declare the currentLink - public currentLink string; // or public currentLink: string = '<a default value>'; public handleChange(link: string) { this.currentLink = link; }

create a view.component.

example selector <view [link]='currentLink'></view>

give the view component an @Input() public link: string;

back to view.component.html 

<div id="overview" *ngIf="link = 'overview'">overview content</div> <div id="main" *ngIf="link = 'main'">overview content</div>

You can then refactor those into seperate child components.

Overview: You are making the app-header a global component that handles a 'link' variable. I would recommend taking a look into ngRx or general app-state methods. As this can be a great way to manage UI.