CODEWITHSUNDEEP
angular
user6016913
user6016913

Reputation: 191

Component template content appearing twice in angular2

While my page is loading the component content is displaying twice.I tried with another component too, but i can't get the actual output.

Here is my app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { Routes, RouterModule } from '@angular/router';

    import { AppComponent }  from './app.component';

    var routes : Routes = [
        {
            path: 'home',
            component: AppComponent
        },  
        { 
            path: '',
            pathMatch: 'full',
            redirectTo: 'home'

         },

    ]

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

app.component.ts

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

    @Component({
      selector: 'my-app',
      template: `<h1>Hello {{name}}</h1><router-outlet></router-outlet>`,
    })
    export class AppComponent  { name = 'Angular'; }

Upvotes: 2

Views: 7073

Answers (1)

Tiep Phan
Tiep Phan

Reputation: 12596

because you have this

var routes : Routes = [
    {
        path: 'home',
        component: AppComponent
    },  
    { 
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'

     },

]

and this

template: `<h1>Hello {{name}}</h1><router-outlet></router-outlet>`,

so when you navigate to / (root), it will redirect to home, and you will get 2 routes point to same component AppComponent

try to create HomeComponent, then home using HomeComponent not AppComponent

Upvotes: 6

Related Questions