Angular 2 - Named router outlets example

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 - Named router outlet example</title>
    <script src="https://npmcdn.com/systemjs@0.19.6/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="system.config.js"></script>
    <!-- Set the base href, demo only! In your app: <base href="/"> -->
    <script>document.write('<base href="' + document.location + '" />');</script>
  </head>
  <body>
    <app>Loading...</app>
    
    <script>
      System.import('app');
    </script>
  </body>

</html>

import {Component} from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';

@Component({
  selector: 'app',
  directives: [ROUTER_DIRECTIVES],
  template: `
    <nav>
      <a [routerLink]="['component-one']">Component One</a>
      <a [routerLink]="['component-two']">Component Two</a>
    </nav>
    <div style="color: green;">Outlet:</div>
    <div style="border: 1px solid green;">
      <router-outlet></router-outlet>
    </div>
    <nav>
      <a (click)="navigateTo('component-two(aux:component-three)')">Component Three</a>
      <a (click)="navigateTo('component-two(aux:component-four)')">Component Four</a>
    </nav>
    <div style="color: green;">Outlet:</div>
    <div style="border: 1px solid green;">
      <router-outlet name="aux"></router-outlet>
    </div>
  `,
})
export class AppComponent {
  constructor(private router: Router) { }

  navigateTo(url) {
    console.log('navigate ', url);
    this.router.navigateByUrl(url);
    //this.router.navigate([url]);
  }
}

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component.ts';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import {provide} from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

var angularVersion = '2.0.0-rc.4';
var rcVersion = '3.0.0-beta.2';

System.config({
  baseUrl: '/',
  paths: {
    'npmcdn:*': 'https://npmcdn.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "npmcdn:@*/*/package.json",
    "npmcdn:*/package.json"
  ],
  
  map: {
    '@angular/core': 'npmcdn:@angular/core@'+angularVersion,
    '@angular/compiler': 'npmcdn:@angular/compiler@'+angularVersion,
    '@angular/common': 'npmcdn:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'npmcdn:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'npmcdn:@angular/platform-browser-dynamic@'+angularVersion,
    '@angular/http': 'npmcdn:@angular/http@'+angularVersion,
    '@angular/router': 'npmcdn:@angular/router@'+rcVersion,
    'immutable': 'npmcdn:immutable@3.8.1',
    'redux': 'https://npmcdn.com/redux@2.0.0/dist/redux.js',
    'ng2-redux': 'npmcdn:ng2-redux@2.3.2',
    'lodash': 'npmcdn:lodash@4.0.0',
    'invariant': 'npmcdn:invariant@2.2.1',
    'redux-thunk': 'npmcdn:redux-thunk@2.1.0',
    'redux-logger': 'npmcdn:redux-logger@2.6.0',
    'rxjs': 'npmcdn:rxjs@5.0.0-beta.6',
    'zone.js': 'npmcdn:zone.js@0.6.12',
    'reflect-metadata': 'npmcdn:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

import { provideRouter, RouterConfig } from '@angular/router';
import ComponentOne from './component-one';
import ComponentTwo from './component-two';
import ComponentThree from './component-three';
import ComponentFour from './component-four';

export const routes: RouterConfig = [
  // Outlet A
  { path: '', redirectTo: 'component-one', pathMatch: 'full' },
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo },
  // Outlet B
  { path: 'component-three', component: ComponentThree, outlet: 'aux' },
  { path: 'component-four', component: ComponentFour, outlet: 'aux' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

import {Component} from '@angular/core';

@Component({
  selector: 'component-one',
  template: 'Component One'
})
export default class ComponentOne { 

}

import {Component} from '@angular/core';

@Component({
  selector: 'component-two',
  template: 'Component Two'
})
export default class ComponentTwo {
}

import {Component} from '@angular/core';

@Component({
  selector: 'component-three',
  template: 'Component Three'
})
export default class ComponentThree {
}

import {Component} from '@angular/core';

@Component({
  selector: 'component-four',
  template: 'Component Four'
})
export default class ComponentFour {
}