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

Rakeschand Rakeschand · Accepted Answer · 2018-06-14T10:18:45

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' }

Angular 6 with 2 router outlet

1 Answers