routing navigate method not redirecting to targeted component

Question

I have an issue with using routing navigate method of angular. I have two components : LoginComponent and HomeComponent. When I click on the button in "login.component.html", I want to be redirected to "home.component.html".

• app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { LoginComponent } from './login/login.component';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    {path: 'home', component: HomeComponent}
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule, RouterModule.forRoot(routes)
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• login.component.html

 <button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

• home.component.html

<p>
  home works!
</p>

The URL changes but it remain in the same component page.

• login.component.ts

  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor(private router:Router) { }
  
    ngOnInit() {
    }
  
     goHome() {
      this.router.navigate(['home']);
    }
  }
  

Quant

check if the router-outlet tag is commented – Jackleg

Answer 1

Make these additions:

<button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

    goHome() {
    this.router.navigate(['home']);
  }

or via <a>.

<a [routerLink]="['/home']">home</a>

If necessary, remove / if you intend to be appended to the current route instead.

Scibert

Answer 2

first of all you need to define routes in app.routing.modules.ts like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'Home', loadChildren: () => import('./Home/Home.module').then(m => m.HomeModule) },
  {
path: '',
redirectTo: '',
pathMatch: 'full'
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

you need to do this in your Login ts file:

goHome() {
    this.router.navigate(['/home']);
  }

and

<button (click)="goHome()">Home</button>

in Login Html file

Or just:

<button [routerLink]="'home'">Home</button>

in Login html file.

Tottering

Answer 3

If you want to load multiple routes in your template then you can use in your app.component template:

 <router-outlet> <router-outlet>

If you want to load nested routes, then try to use:

constructor(private routes: ActivatedRoute) {}
|
|
|
this.route.navigate(['home'], {relativeTo: this.routes});

and use the routerLink directive in your a tag and then pass the route which you specified in your path

hope it's useful.

Clubman

Answer 4

Add the routerLink to the button

<button routerLink="/home">Home</button>

Maggio

Answer 5

Don't need to write these method in ts file

goHome(){
      this.router.navigate(['home']);
     }

just add routerLink attribute in button tag

<button class="btn btn-primary" (click)="goHome();" class="clickable" routerLink="/home">Home</button>

Harbert

Answer 6

Verify the following the steps for proper navigation

Step 1: By default, the RouterModule is imported in the app-routing.module.ts

Step 2: Check whether you have this below code in your app.component.html

<router-outlet></router-outlet>

Step 3: Define the correct path in app-routing.module.ts

const routes: Routes = [
  {
    path: 'Home', component: HomeComponent,
  }, 
];

Robb