Angular 2 Routing with Home Page

Question

I am learning Angular2 Routing and try to display the Welcome Page. My app has three pages

Welcome Page (it's just a blank page with just links to other Routes)
Home Page - Some texts and Description
Todo List Page - List of ToDos

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.

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.

I tried to set the '' blank path to AppComponent as below, but it loads AppComponent twice and shows the links two times.

{ path: '', component: AppComponent, pathMatch: 'full' },

app.module.ts

@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 { }

app.component.ts

import { Component } from "@angular/core"

@Component({
    moduleId: module.id,
    selector: 'app',
    template: `
    <div>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <a class='navbar-brand'>{{pageTitle}}</a>
                <ul class='nav navbar-nav'>
                    <li><a [routerLink]="['/home']">Home</a></li>
                    <li><a [routerLink]="['/todo']">To Do</a></li>
                </ul>
            </div>
        </nav>        
     </div>
    <div class='container'>
            <router-outlet></router-outlet>
        </div>
     `
})
export class AppComponent {    
}

home/home.component.ts

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

@Component({
    moduleId: module.id,    
    templateUrl: "home.component.html"    
})
export class HomeComponent {
}

home/home.component.html

<h1>Hello from Home Component</h1>
<h2>This is my first TODO App for Angular 2...</h2>

Jeyaprakash Jeyaprakash · Accepted Answer · 2017-10-18T20:47:20

you need to remove this line { path: '**', redirectTo: 'home', pathMatch: 'full' }

what you mention in the above line is

if any url other that /home or /todo comes please redirectTo to /home. So that it always display Home.

So your app.module.ts should be

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'todo', component: TodoListComponent },
      { path: '**', redirectTo: 'home', pathMatch: 'full' }
    ])
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    TodoListComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

This will fix the issue. I tried and it got fixed

check the below link for using routing in angular 2 http://www.angularinfo.com/routings/

Angular 2 Routing with Home Page

2 Answers