title: Angular 6 with 2 router outlet
body: <p>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?</p>
  
  <p>edited re open problem</p>
  
  <p>APP COMPONENT HTML</p>
  
  <pre><code>&lt;main [@fadeInAnimation]="o.isActivated ? o.activatedRoute : ''"&gt;
      &lt;router-outlet #o="outlet" name="main"&gt;&lt;/router-outlet&gt;
      &lt;router-outlet #o="outlet" name="second"&gt;&lt;/router-outlet&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>APP MODULE</p>
  
  <pre><code>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 () =&gt; 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 { }
  </code></pre>
  
  <p>ERROR</p>
  
  <p>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
  Error: Cannot match any routes. URL Segment: 'home'</p>
  
  <p>can view on editor
  <a href="https://stackblitz.com/edit/angular-ghusfs" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ghusfs</a></p>
  
  <p>thanks</p>