title: Angular 2 routing displays both the component
body: <p>I have a login component and  mainpage component in  angular 2. when i logged in  and try to navigate to main page, both  login and mainpage component are coming in same page.</p>
  
  <p>my app.module.ts</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { AppComponent }  from './app.component';
  import { Appmainpage }  from './mainpage.component';
  import { RouterModule, Routes } from '@angular/router';
  
  
  const appRoutes: Routes = [
  
     {path: 'login', component: AppComponent},
     { path: 'mainpage', component: Appmainpage}
  
  
   ];
  
  @NgModule({
    imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ],
    declarations: [ AppComponent, Appmainpage ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>my app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Login } from './login';
  import { Router }  from '@angular/router';
  import { ActivatedRoute } from '@angular/router';
  
  
  @Component({
    selector: 'my-app',
    template: `
  
    &lt;router-outlet&gt; &lt;/router-outlet&gt;
  
    `,  
  })
  
  
  export class AppComponent  {
    constructor(public _router: Router, private route: ActivatedRoute){} 
    model  = new Login(null, null)
    uname:any;
    pwd:any;
  ulogin()
  {
    if (this.model.uname == "NP13310" &amp;&amp; this.model.pwd == "pandi")
  {
  console.log("sucess");
   this._router.navigate(['../mainpage'], { relativeTo: this.route});
  }
  
  }
  
   }
  </code></pre>
  
  <p>my  mainpage.component.ts which  displays the main page</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { AppComponent }  from './app.component';
  import { RouterModule, Routes } from '@angular/router';
  @Component({
  
  templateUrl: 'app/mainp.component.html'  
  })
  export class Appmainpage  {
  
  
   }
  </code></pre>