Angular router is giving error "TS2339: Property 'navigate' does not exist on type 'Route'."

Question

I can't figure this one out. Why isn't navigate available?
Using it gives the error "TS2339: Property 'navigate' does not exist on type 'Route'."

https://angular.io/api/router/Router#navigate

Simple example here: https://stackblitz.com/edit/angular-ivy-qpxiys?file=src/app/pages/testit/testit.component.ts

Answer 1

That would be because you are using Route instead of Router in the constructor.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-testit',
  templateUrl: './testit.component.html',
  styleUrls: ['./testit.component.css'],
})
export class TestitComponent implements OnInit {
  constructor(private router: Router) {} // < -- This was wrong.

  ngOnInit() {}

  changePage() {
    this.router.navigate(['your-desired-route-name']);
  }
}