Error TS2339: Property 'router' does not exist on type 'HomePage'

Question

I am constantly getting the following error:

[ng] ERROR in src/app/home/home.page.ts(34,10): error TS2339: Property 'router' does not exist on type 'HomePage'.

I am trying to couple Wordpress with Ionic 4 and so far I managed to fetch the recent posts from my site. Now I want to make these clickable and navigate to them, but I am getting the error mentioned above because of this snippet in my home.page.ts

  openPost(postId) {
    this.router.navigateByUrl('/post/' + postId);
  }

Full page:

import { Router } from '@angular/router';
import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { WordPressRestapiService, Post } from '../services/wordpress-restapi.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  categoryId: number;
  private posts : Post[] = [];

  constructor(
    public loadingController: LoadingController,
    private wordpressService: WordPressRestapiService) { }

  async ngOnInit() {
    const loading = await this.loadingController.create();
    await loading.present();

    this.loadPosts().subscribe((posts: Post[]) => {
      this.posts = posts
      loading.dismiss();
    });
  }

  loadPosts() {
    return this.wordpressService.getRecentPosts(this.categoryId);
  }
  openPost(postId) {
    this.router.navigateByUrl('/post/' + postId);
  }
}

I have tried removing "this" as well, but nothing that I could find on SO worked for me. Anyone any idea?

Answer 1

Inject the router in the constructor

constructor(
  public loadingController: LoadingController,
  private wordpressService: WordPressRestapiService,
  private router: Router) { }