title: router.navigate not navigating to defined path html
body: <p>i am new to angular. Creating simple navigation from one component to other. Using router.navigate method for navigation. </p>
  
  <p>When a button is clicked url is getting changed but that particular component html page is not getting shown up.</p>
  
  <p>this.router.navigate(['login']);</p>
  
  <p>app.module.ts </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { LoginComponent } from './Components/ProfileComponents/login/login.component';
  import { Routes, RouterModule } from '@angular/router';
  import { TestrouteComponent } from './testroute/testroute.component';
  
  
  const appRoutes: Routes = [
    { path: 'login', component: TestrouteComponent }
  ];
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      TestrouteComponent
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(appRoutes, { enableTracing: true })
    ],
    exports: [RouterModule],
    providers: [
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.ts </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    constructor(private router: Router, private _activateRoute: ActivatedRoute) {}
    title = 'app';
    testRouting() {
    this.router.navigate(['login']);
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
    &lt;h1&gt;
      Welcome
    &lt;/h1&gt;
  &lt;/div&gt;
  &lt;h2&gt;Here are some links to help you start: &lt;/h2&gt;
  &lt;button (click)="testRouting()"&gt;test&lt;/button&gt;
  </code></pre>
  
  <p>testroute.component.html</p>
  
  <pre><code>&lt;p&gt;
    testroute works!
  &lt;/p&gt;
  </code></pre>
  
  <p>testroute.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-testroute',
    templateUrl: './testroute.component.html',
    styleUrls: ['./testroute.component.css']
  })
  export class TestrouteComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>plain code just want to check the router.navigate functionality. Not sure exactly what i am missing here.</p>