title: Angular 2 Routing with Home Page
body: <p>I am learning Angular2 Routing and try to display the Welcome Page.
  My app has three pages</p>
  
  <ul>
  <li>Welcome Page (it's just a blank page with just links to other Routes)</li>
  <li>Home Page - Some texts and Description</li>
  <li>Todo List Page - List of ToDos</li>
  </ul>
  
  <p>The problem is that I cannot manage to display the Welcome Page.  It automatically loads Home page and show the content from the HomeComponent by default.</p>
  
  <p>As shown in the screenshot, I want to display only 2 links.  I want to load the content from Home/Todo only when it is clicked.  But by default, it goes to localhost:xxx/Home and load the Home page.</p>
  
  <p><a href="https://i.stack.imgur.com/Dj7Ev.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dj7Ev.png" alt="enter image description here"></a></p>
  
  <p>I tried to set the '' blank path to AppComponent as below, but it loads AppComponent twice and shows the links two times.</p>
  
  <pre><code>{ path: '', component: AppComponent, pathMatch: 'full' },
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>@NgModule({
      imports: [
          BrowserModule,
          HttpModule,
          RouterModule.forRoot([
              { path: 'home', component: HomeComponent },
              { path: 'todo', component: TodoListComponent },
              { path: '**', redirectTo: 'home', pathMatch: 'full' }
          ])
      ],
      declarations: [
          AppComponent,
          HomeComponent,
          TodoListComponent
      ],
      bootstrap: [AppComponent],
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from "@angular/core"
  
  @Component({
      moduleId: module.id,
      selector: 'app',
      template: `
      &lt;div&gt;
          &lt;nav class='navbar navbar-default'&gt;
              &lt;div class='container-fluid'&gt;
                  &lt;a class='navbar-brand'&gt;{{pageTitle}}&lt;/a&gt;
                  &lt;ul class='nav navbar-nav'&gt;
                      &lt;li&gt;&lt;a [routerLink]="['/home']"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a [routerLink]="['/todo']"&gt;To Do&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;        
       &lt;/div&gt;
      &lt;div class='container'&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
       `
  })
  export class AppComponent {    
  }
  </code></pre>
  
  <p><strong>home/home.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      moduleId: module.id,    
      templateUrl: "home.component.html"    
  })
  export class HomeComponent {
  }
  </code></pre>
  
  <p><strong>home/home.component.html</strong></p>
  
  <pre><code>&lt;h1&gt;Hello from Home Component&lt;/h1&gt;
  &lt;h2&gt;This is my first TODO App for Angular 2...&lt;/h2&gt;
  </code></pre>