Angular 6 with 2 router outlet

Question

how can I make sure to have at least 2 router-outlets and manage them at the routing level? can link me a working jsfillde or stackblitz or similar?

edited re open problem

APP COMPONENT HTML

<main [@fadeInAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet" name="main"></router-outlet>
    <router-outlet #o="outlet" name="second"></router-outlet>
</main>

APP MODULE

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// components
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';

// models
import { Permissions } from '../app/models/permissions';

// guards
import { CanAccess } from '../app/guards/canaccess';
import { OtherComponent } from './components/other/other.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';

const permissions: Permissions = new Permissions();

const appRoute: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, data: { permission: permissions }, canActivate: [CanAccess], outlet: 'main' },
  { path: 'other', component: OtherComponent, data: { permission: permissions }, canActivate: [CanAccess], outlet: 'second' },
  { path: 'pageNotFound', component: PageNotFoundComponent, data: { permission: permissions }, canActivate: [CanAccess], outlet: 'main' },
  { path: '**', redirectTo: 'pageNotFound', pathMatch: 'full' },
];

export function appConfigFactory() {
  try {
      return () => true;
  } catch (e) {
      console.log(`catch load: ${e}`);
  }
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    OtherComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoute)
  ],
  providers: [
    CanAccess,
    {
      provide: APP_INITIALIZER,
      useFactory: appConfigFactory,
      deps: [],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ERROR

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home' Error: Cannot match any routes. URL Segment: 'home'

can view on editor https://stackblitz.com/edit/angular-ghusfs

thanks

Solution

You may define parent child component to use multiple router-outlets like this.

{
        path: 'shop', component: ParentShopComponent, 
        children : [{
            path: 'hello', component: ChildShopComponent
        }]
    }

Your first <router-outlet> will be in app component & second in ParentShopComponent rest of components can lend in child level or parent.

But if your relationship is child parent than check this out Named Router Outlets

Example

This is main Router OUtlet These are named ones

<div class="columns">
  <md-card>
    <router-outlet name="list"></router-outlet>
  </md-card>
  <md-card>
    <router-outlet name="bio"></router-outlet>
  </md-card>
</div>

And here's how you use them

{ path: 'speakersList', component: SpeakersListComponent, outlet: 'list' }

Comments

[Kamil Chlebek]

You may find some interesting here: Named router outlet

[Pasquale De Lucia]

is mandatory to create children component to have more router outlets?

[Rakeschand]

No, if you don;t want to create you can use named router outlet check out the post

[Rakeschand]

No it’s not mandatory, I just wrote 2 methods of doing multiple outlets.

[Pasquale De Lucia]

can check my code beacuse not working. can help me to fix it?