Angular 5 router.navigate does not work

Question

I'm trying to redirect a user to another page based on some condition. Here's my example login component:

  ngOnInit() {
    console.log(">>> router", this.router)
    console.log(">>> activatedRoute", this.activatedRoute)

    if (this.activatedRoute.queryParams['value'].param === 'value') {
      console.log(">>> redirecting")
      this.router.navigate(['home']);
    }
  }

If I navigate to the login component without a parameter, then I'm shown the login component template, that's good.

However, when I navigate to the login component with a parameter named param and the value of value, then I want to redirect the user to the home page. That's not working.

Here's my home page route:

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

import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';

const thisRoute: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(thisRoute, {
      useHash: true, initialNavigation: false
    })
  ],
  declarations: [
    HomeComponent
  ]
})
export class HomeModule { }

I've created a test project in github for you to download and run on your computer. Just download this project: https://github.com/wvary/route-test

Run npm install.

Then run npm run start.

Navigate to http://localhost:8080/#/home

You should see something like:

You can see the content of each page by click on the three links. The idea is to be on the home page when you click on the middle link.

Thanks

Not my intention, but if that's what it's doing and the reason for it not working, then I can change the code. Please advise. — Will, Apr 06 '18 at 22:19

score 8 · Answer 1 · answered Apr 06 '18 at 22:48

8

Try this this.router.navigate(['../home']);

answered Apr 06 '18 at 22:48

Adi Winata

441
4
9

19

Reason? Explanation? – Abhi Sep 13 '21 at 13:20

score 5 · Accepted Answer · answered Apr 06 '18 at 22:21

5

queryParams is Observable, so you cannot get parameters from it in this way. Another thing here to note is that queryParams was replaced in this version of Angular by queryParamMap.

Here is described how to using it properly.

answered Apr 06 '18 at 22:21

pioro90

684
6
14

Thanks, that does the trick. Btw, any idea why the ngOnInit does load run if I open a browser tab and navigate to the login page? It executes If I click one of the links. – Will Apr 06 '18 at 22:25
I dont know if this resolve this problem but you should use Router.forChild(..) in your HomeModule – pioro90 Apr 06 '18 at 22:33

score 0 · Answer 3 · answered May 22 '23 at 19:34

In new version of Angular you should use

this.router.navigate([url], params)

params is optional.

to navigate to the parent route you need to inject Router and ActivatedRoute

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
) {}

and use

this.router.navigate(['../'], { relativeTo: this.activatedRoute });

score -4 · Answer 4 · answered Apr 06 '18 at 22:27

-4

Try this please:

const thisRoute: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];
export const routing = RouterModule.forRoot(thisRoute);

@NgModule({
  imports: [
   routing
    })
  ],
  declarations: [
    HomeComponent
  ]
})

answered Apr 06 '18 at 22:27

OnnaB

248
1
7
19

1

pioro90's answer solved the issue. Also my actual app does not work. I was just created a simpler example to demonstrate the problem. Your suggestion doesn't change anything, I don't think. You're simply define variables in different places. – Will Apr 06 '18 at 22:29
4 negative votes 1 comment. – MindRoasterMir Jun 13 '22 at 15:26

Angular 5 router.navigate does not work

4 Answers4

Linked