undefined

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FooComponent } from './foo.component';

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello {{name}}</h1>
  <a routerLink="foo">to foo</a>
  <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit { 
  constructor(router: Router) {
    router.resetConfig([
      {
        path: "foo", component: FooComponent,
      }
    ]);
  }
  
  ngOnInit() {
  }
  
  name = 'Angular'; 
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { FooComponent } from './foo.component';
import { RouterModule } from '@angular/router';

@NgModule({
  imports:      [ BrowserModule, RouterModule.forRoot([]) ],
  declarations: [ AppComponent, FooComponent ],
  bootstrap:    [ AppComponent ],
  entryComponents: [ FooComponent ]
})
export class AppModule { }


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!DOCTYPE html>
<html>
  <head>
    <base href="./">
    <title>Hello Angular</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <style>
      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
    </style>

    <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app><!-- content managed by Angular --></my-app>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'my-foo',
  template: `<h1>Hello Foo</h1>
  <a routerLink="goo/goo">to goo</a>
  <router-outlet></router-outlet>`
})
export class FooComponent { 
  constructor(activatedRoute: ActivatedRoute) {
    // actually this can also be done by Router.resetConfig() 
    // but you have to traverse down here from Router.route.
    activatedRoute.routeConfig.children = [
      {
        path: "goo", loadChildren: "app/goo.module"
      }
    ];
  }
}

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { GooComponent }  from './goo.component';
import { BooComponent } from './boo.component';

@NgModule({
  imports:      [ CommonModule, 
    RouterModule.forChild([
      { path: 'goo', component: GooComponent }
    ])
  ],
  declarations: [ GooComponent, BooComponent ],
  entryComponents: [ BooComponent ]
})
export default class GooModule { }

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BooComponent } from './boo.component';

@Component({
  selector: 'my-goo',
  template: `
  <h1>Hello Goo</h1>
  <a routerLink="boo">to boo</a>
  <router-outlet></router-outlet>`
})
export class GooComponent { 
  constructor(activatedRoute: ActivatedRoute) {
    // Router.resetConfig() cannot be used here
    // because child route config in lazy module cannot be seen by using Router.
    activatedRoute.routeConfig.children = [
      {
        path: "boo", component: BooComponent
      }
    ];
  }
}

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

@Component({
  selector: 'my-boo',
  template: `<h1>Hello Boo</h1>`
})
export class BooComponent {
}