CODEWITHSUNDEEP
javascriptangular
Miloš Milutinov
Miloš Milutinov

Reputation: 417

Angular routing problem - routing won't work as usual

I have a problem where when I type manually localhost:4200/create it goes on the page where i want it to go, but when I click on a link to lead me there, I get an error saying:

TypeError: Cannot read property 'unsubscribe' of undefined
    at PostListComponent.ngOnDestroy

Here's my code:

header.component.html

<mat-toolbar color="primary">
  <span><a routerLink="/">My Messages</a></span>
  <ul>
    <li><a routerLink="/create">New Post</a></li>
  </ul>
</mat-toolbar>

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PostCreateComponent } from './posts/post-create/post-create.component';
import { PostListComponent } from './posts/post-list/post-list.component';

const routes: Routes = [
  {path: '', component: PostListComponent},
  {path: 'create', component: PostCreateComponent},
];

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

postlistcomponent.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';

import { Post } from '../posts';
import { PostsService } from '../posts.service';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css'],
})
export class PostListComponent implements OnInit, OnDestroy {
  
  posts: Post[] = [];
  private postsSub: Subscription;
  constructor(public postsService: PostsService) {}

  ngOnInit(): void {
    this.postsService.getPosts();
    this.postsService.getPostUpdateListener().subscribe((posts: Post[]) => {
      this.posts = posts;
    });
  }

  onDelete(postId: string) {
    this.postsService.deletePost(postId);
  }

  ngOnDestroy() {
    this.postsSub.unsubscribe();
  }
}

Upvotes: 2

Views: 240

Answers (3)

Wolobi
Wolobi

Reputation: 118

As you can see in your ngInit you are not passing any value to your variable (postsSub). That is why you cannot destroy it.

Change this :

   ngOnInit(): void {
    this.postsService.getPosts();
    this.postsService.getPostUpdateListener().subscribe((posts: Post[]) => {
      this.posts = posts;
    });
  }

For this:

  ngOnInit(): void {
    this.postsService.getPosts();
    this.postsSub = this.postsService.getPostUpdateListener().subscribe((posts: Post[]) => {
      this.posts = posts;
    });
  }

That should work.

Regards

Upvotes: 1

Matt
Matt

Reputation: 35203

When you navigate from / to /create your ngOnDestroy in the PostListComponent is throwing an error.

This is why it is happening on the link and not when you put in the url.

Upvotes: 1

Kinglish
Kinglish

Reputation: 23654

Like the error says, you're calling unsubscribe on an object that doesn't exist in PostListComponent (postlist.component.ts?)

In that file, find the ngOnDestroy function and for any this.object$.unsubscribe() functions, test for the object first -

if (this.object$ && !this.object$.closed) {
   this.object$.unsubscribe()
}

I'm using this.object$ as an example - your variable will be called something different

Upvotes: 3

Related Questions