Demonstrating that going in and out of DemoComponent will repeat the …

…data an extra time every time. Adding npm-shrinkwrap to clearly state the used modules

client/imports/app/app.component.html

@@ -1,4 +1,6 @@
 <div>
     <h1>Hello Angular2-Meteor!</h1>
-    <demo></demo>
+    <a routerLink="/demo" routerLinkActive="active">Demo</a>
+    <a routerLink="/demo2" routerLinkActive="active">Demo 2</a>
+    <router-outlet></router-outlet>
 </div>

client/imports/app/app.module.ts

@@ -1,14 +1,17 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule }   from '@angular/router';
 import { AppComponent } from './app.component';
 import { DemoComponent } from './demo/demo.component';
 import { DemoDataService } from './demo/demo-data.service';
+import { DemoComponent2 } from "./demo2/demo2.component";
 
 @NgModule({
   // Components, Pipes, Directive
   declarations: [
     AppComponent,
-    DemoComponent
+    DemoComponent,
+    DemoComponent2
   ],
   // Entry Components
   entryComponents: [
@@ -20,7 +23,11 @@ import { DemoDataService } from './demo/demo-data.service';
   ],
   // Modules
   imports: [
-    BrowserModule
+    BrowserModule,
+    RouterModule.forRoot([
+      { path: 'demo', component: DemoComponent },
+      { path: 'demo2', component: DemoComponent2 }
+    ])
   ],
   // Main Component
   bootstrap: [ AppComponent ]

client/imports/app/demo2/demo2.component.html

@@ -0,0 +1 @@
+<h2>Demo 2</h2>

client/imports/app/demo2/demo2.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import template from './demo2.component.html';
+
+@Component({
+    template
+})
+export class DemoComponent2 {
+    constructor() {}
+}