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

Expensive

Are you trying to lazy load the Home component? – Slovene

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. – Expensive

Answer 1

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.

Madelon

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. – Expensive

I dont know if this resolve this problem but you should use Router.forChild(..) in your HomeModule – Madelon

Answer 2

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

Sinker

Reason? Explanation? – Slattery

Answer 3

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

Xanthus

Answer 4

Try this please:

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

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

Excisable

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. – Expensive

4 negative votes 1 comment. – Picador