CODEWITHSUNDEEP
angularangular2-routing
TTCG
TTCG

Reputation: 9113

Angular 2 Routing with Home Page

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

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.

enter image description here

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>

Upvotes: 1

Views: 24306

Answers (2)

John
John

Reputation: 11399

I think the reason the HomeComponent is being displayed is because your <router-outlet></router-outlet> will change the underlying component with home when the url is /home. You also have this line in your app.module.ts

{ path: '**', redirectTo: 'home', pathMatch: 'full' },

which means that all of your urls that do not match /home or /todo will make your HomeComponent pop up. You could try to remove the redirecting:

{ path: '**', redirectTo: 'home', pathMatch: 'full' } or redirect to '' instead (or a new PageNotFoundComponent).

Also make sure that none of the items (home or todo) in your menu is selected on page load.

Upvotes: 3

Jeyaprakash
Jeyaprakash

Reputation: 101

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 ScreenShot

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

Upvotes: 10

Related Questions