Cannot read property 'unsubscribe' of undefined Angular4

Question

I have a problem with my project. I've been struggling with Firebase for a while. Now I want to create an user profile component and for that I want to get the information of the current user logged in. The thing is that I keep getting this error: "Cannot read property 'unsubscribe' of undefined Angular4" Whats wrong with the code?? Thanks for your help.

import {Component, OnInit, ViewChild} from '@angular/core';
import {UserService} from "../pages/users/user.service";
import {User} from "../pages/users/user";
import {Profile} from "../pages/users/profile";
import {AuthService} from "../pages/login/auth.service";
import {MdSnackBar} from "@angular/material";
import {Observable, Subscription} from "rxjs";

@Component({
  selector: 'app-userprofile',
  templateUrl: './userprofile.component.html',
  styleUrls: ['./userprofile.component.scss']
})
export class UserprofileComponent implements OnInit {

   initialProfile: Profile;
  user: User;

  error: string;

  constructor(private userService: UserService,
    private auth: AuthService,
    public updateValidationBar: MdSnackBar) { }

  ngOnInit() {
    let sub = this.auth.currentUser().subscribe(user => {
      this.user = user;
      this.cloneInitial(this.user.profile);
      sub.unsubscribe();
    });
    this.user = new User();
    this.user.profile = new Profile();
    this.cloneInitial(this.user.profile);
  }

  cloneInitial(profile : Profile){
    this.initialProfile = Object.assign(new Profile(), profile);
  }

  onSubmit(userProfileForm){
    if(userProfileForm.form.valid){
      let sub = this.userService.updateUserProfile(this.user)
        .subscribe(user => {
          this.updateValidationBar.open("Your profile is update", "Ok", {
            duration: 3000
          });
          this.cloneInitial(user.profile);
        },
        err => {
          this.error = err.message;
        },
        () => {
          sub.unsubscribe();
        });
    }
  }

  profileIsChanged(){
    return this.user.profile.displayName !== this.initialProfile.displayName
      || this.user.profile.username !== this.initialProfile.username
      || this.user.profile.email !== this.initialProfile.email;
  }
}

html

<form (ngSubmit)="onSubmit(userProfileForm)"
      #userProfileForm="ngForm"
      fxFlexFill [fxLayout]="'row'"
      fxLayoutAlign="center start">
  <md-card>
    <md-card-content  [fxLayout]="'column'" fxFlex="400px">
      <h3> Update User profile</h3>
      <p [ngStyle]="{'color': 'red', 'font-size':'75%'}"
         align="start">
        {{error}}
      </p>
      <md-input-container >
        <input mdInput
               fxFlex="100"
               required
               minlength="3"
               placeholder="Username"
               [(ngModel)]="user.profile.username"
               name="username"
               #username="ngModel">
        <md-hint
          *ngIf="!username.pristine && username.errors?.required"
          [ngStyle]="{'color': 'red'}"
          align="start">
          Username required
        </md-hint>
        <md-hint
          *ngIf="!username.pristine && username.errors?.minlength"
          [ngStyle]="{'color': 'red'}"
          align="start">
          Username to short (min. 3 characters)
        </md-hint>
      </md-input-container>
      <md-input-container >
        <input mdInput
               fxFlex="100"
               minlength="3"
               placeholder="Display Name"
               [(ngModel)]="user.profile.displayName"
               name="displayName"
               #displayName="ngModel">
      </md-input-container>
    </md-card-content>
    <md-card-actions fxLayoutAlign="end"  [fxLayout]="'row'">
      <button type="submit"
              md-icon-button
              [disabled]="!userProfileForm.form.valid || !profileIsChanged()">
      </button>
    </md-card-actions>
  </md-card>
</form>

http://stackoverflow.com/questions/38008334/angular2-rxjs-when-should-i-unsubscribe-from-subscription — Parth Ghiya, Apr 12 '17 at 02:52

score 2 · Accepted Answer · edited Dec 12 '19 at 15:36

2

Your unsubscribe timing is wrong, because while subscribe, the subscription sub can not be reached.

You can try this way:

keep your subscription in your component
call sub.unsubscribe(); in ngOnDestroy()

edited Dec 12 '19 at 15:36

Yuri

4,254
1
29
46

answered Apr 12 '17 at 02:51

Pengyy

37,383
15
83
73

score 1 · Answer 2 · answered May 11 '19 at 20:29

Unsubscribe should be executed on "OnDestroy" lifecycle hook (angular docs). More declarative way is to use "Subscription" class, see example below:

// add property
private subscription: Subscription = new Subscription();

// implement OnDestroy life-cycle hook
ngOnDestroy() {
  this.subscription.unsubscribe();
}

// add when subscribing.
this.subscription.add(
      this.signinForm.valueChanges.subscribe(
        _ => { console.log('form value changed.');})
    );

// add one more
this.subscription.add(
      this.myService.getData.subscribe(
        data => { console.log(data);})
    );

score 0 · Answer 3 · answered Apr 12 '17 at 02:56

0

You should define sub as new const variable. Then try to unsubscribe. I will work.

answered Apr 12 '17 at 02:56

Liu Zhang

1,808
19
31

Cannot read property 'unsubscribe' of undefined Angular4

3 Answers3