Angular 2 : Cannot read property 'unsubscribe' of undefined

Question

This is an e-commerce cart built on Angular 2. when I leave this component and load any other component, I get the error

EXCEPTION: Uncaught (in promise): Error: Error in ./ProductsComponent class ProductsComponent - inline template:11:4 caused by: Cannot read property 'unsubscribe' of undefined

I tried removing private subscription : Subscription and ngOnDestroy. But still gets the same error.

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Products } from './products';
  import { PRODUCTS } from './product_list';
  import { Subscription } from 'rxjs/Rx';
  import { PaginationService } from './pagination.service';
  import { Pagination } from './pagination';
  import 'rxjs/add/operator/switchMap';

  @Component({
    selector: 'any-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.css']
  })

  export class ProductsComponent implements OnInit, OnDestroy {

    color: string;
    allProducts = PRODUCTS;
    private subscription: Subscription;
    paginationNow : Pagination = this.paginationService.CreatePaginationNow(this.paginationService.productPerPage);
    products : Array<Products> = this.allProducts.slice((this.paginationNow.paginationLowerLimit-1),this.paginationNow.paginationHigherLimit); 

    constructor( private paginationService : PaginationService ) { }

    ngOnInit() {
      this.subscription = this.paginationService.pushedPagination.subscribe(
        PaginationNow => {
          this.paginationNow = PaginationNow;
           this.products = this.allProducts.slice((this.paginationNow.paginationLowerLimit-1),this.paginationNow.paginationHigherLimit);
        }        
      );      
    }

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

enter image description here

Hi Guerrilla, thank you for taking the question. I am new to angular 2. Can you elaborate further. — edmond tm, Mar 26 '17 at 10:55
Error message says can't read unsubscribe of undefined. Only place I can see you calling that is in ngOnDestroy(). So that makes me think that your service isn't returning an observable maybe. try settings a break point on the line where you unsubscribe and see if subscription is initiated and it is an observable. — Guerrilla, Mar 26 '17 at 11:02
I did a console.log at first line of ngOnDestroy but it was never called before error appear. — edmond tm, Mar 26 '17 at 11:23
usually you can expand the object in console. You have maps enabled in dev tools? — Guerrilla, Mar 26 '17 at 11:36

score 0 · Answer 1 · answered Mar 26 '17 at 14:52

I solved this.

" ProductsComponent - inline template:11:4 "

I was looking for problem with subscription at Product Component but the real problem was at the child component of Product Component not provided here.

The problem with Child Route of Product Component (pagination.component.ts) was :

ngOnInit() {
     this.paginationService.pushedPagination.subscribe(
        PaginationNow => {
          this.paginationNow = PaginationNow;       
        }
      ); 

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

I changed made was :

  ngOnInit() {    
     this.subscription = this.paginationService.pushedPagination
        .subscribe(
               PaginationNow => {
                    this.paginationNow = PaginationNow;       
                }
          );

Due to my inexperience with Angular 2 troubleshooting. (inline template:11:4)

Consider accepting your own answer if it solved your problem. https://stackoverflow.com/help/someone-answers — Kim Kern, May 23 '19 at 09:02

Angular 2 : Cannot read property 'unsubscribe' of undefined

1 Answers1