router.navigate not navigating to defined path html

Question

i am new to angular. Creating simple navigation from one component to other. Using router.navigate method for navigation.

When a button is clicked url is getting changed but that particular component html page is not getting shown up.

this.router.navigate(['login']);

app.module.ts

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

app.component.ts

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']);
  }
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<h2>Here are some links to help you start: </h2>
<button (click)="testRouting()">test</button>

testroute.component.html

<p>
  testroute works!
</p>

testroute.component.ts

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() {
  }

}

plain code just want to check the router.navigate functionality. Not sure exactly what i am missing here.

John · Accepted Answer · 2018-04-05 05:30:39Z

2

I think you forgot to add your <router-outlet></router-outlet> inside your app.component.html file.

It will add the component defined in your router module when the url matches a given route. So in your case, it will add the TestrouteComponent.

For instance in your app.component.html

<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<h2>Here are some links to help you start: </h2>
<button (click)="testRouting()">test</button>
<router-outlet></router-outlet>

Note that your h1, h2, button elements will still be visible even when the route change when the html is set up like this.

edited Apr 5, 2018 at 5:30

answered Apr 5, 2018 at 5:24

John

11.6k5 gold badges60 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

joe Over a year ago

yes h1,h2 button elements are still visible. But in my case i dont want that to happen i want page to redirect to testRouteComponent html page.

John Over a year ago

Then you must organize your html differently. Maybe add a separate component for your h1, h2 and button, and add them only when the route is "", f.eks.

joe Over a year ago

const appRoutes: Routes = [ { path: 'login', component: TestrouteComponent }, {path: '', component: AppComponent } ];

joe Over a year ago

i have added appcomponent route as separate still it doesnt work.

Lakshmipathi G Over a year ago

Thanks @John Tried so many solutions, but just adding <router-outlet></router-outlet> worked for me.

|

Collectives™ on Stack Overflow

router.navigate not navigating to defined path html

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related