Angular2 EXCEPTION: Cannot read property 'off' of null

Question

I have no idea what could be causing this. it looks like it could be a third party plugin.

my x-editable component

declare var $: any;

@Component({
  selector: 'x-editable',
  template: '<a attr.id="{{widgetId}}" class="{{className}}"><ng-content></ng-content>{{model }}</a>'
})
export class XEditableComponent implements OnInit, AfterContentChecked {

  @Input() model: any = '';
  @Output() modelChange = new EventEmitter();
  @Input() Name: string = '';
  @Input() type: any = 'text';
  @Input() value: any;
  @Input() pk: any;

  @Output() change = new EventEmitter();

  public widgetId: any;
  public widgetsCounter = 0;

  private _options: any;

  constructor(private el: ElementRef) {
    this.widgetId = 'x-editable' + this.widgetsCounter++;
  }

  ngOnInit() {
    this.render();
  }

  ngAfterContentChecked() {
    if (this._options && ['type',
      'placement',
      'mode',
      'value',
      'disabled',
      'placeholder',
      'originalTitle',
      'source',
      'showbuttons',

      'template',
      'viewformat',
      'format',
      'pk',
    ].some((it) => {
      return this._options[it] !== this[it];
    })) {
      this.render();
    }

  }

  render() {
    let element = $(this.el.nativeElement);
    let options = {
      type: this.type,
      placement: this.placement,
      mode: this.mode,
      value: this.value,
      disabled: this.disabled,
      placeholder: this.placeholder,
      originalTitle: this.originalTitle,
      source: this.source,
      showbuttons: this.showbuttons,
      template: this.template,
      viewformat: this.viewformat,
      format: this.format,
      pk: this.pk,
    };

    element.editable('destroy');
    element.editable(options);

    element.on('save', (e, params) => {
      this.model = params.newValue;
      this.modelChange.emit(params.newValue);

      let data = {};
      data['id'] = this.pk;
      data[this.Name] = params.newValue;

      this.change.emit(data);
    });

    this._options = options;
  }
}

which emits to the

export class MenuTableSelectedFormComponent implements OnInit {

    @Input() public selectedMenu: Menu;
    @Output() public selectedMenuChange = new EventEmitter();

    @Output() updatePage = new EventEmitter();

    constructor() { }

    ngOnInit() { }

    updateMenuPage($event) {
        // update the parent
        this.updatePage.emit($event);
    }

}

which emits to its parent that saves the data (makes a request)

export class MenuTableListComponent {

    @Input() public menus: any;
    @Input() public selectedMenu: Menu;
    @Output() public selectedMenuChange = new EventEmitter();
    @Output() public showForm = new EventEmitter();


    /**
     * @param $event - data from the child component for updating the model
     */
    updateMenuPage($event) {
        let id = $event.id;
        delete $event['id'];

        // save the data here
        this.page.update(id, $event)
            .subscribe(res => {
                this.notify.success('Menu Saved', 'Menu saved successfully!');
            });
    }    
}

I'm using angular2-jwt to handle my http requests. the rest are my own services being that run http request through angular2-jwt.

Specifically this error happens when i emit the data (this.change.emit($event)) in x-editable component. then again, i've completely removed the x-editable component and just regularly bound an input field with [(ngModel)] and i get the same error which leads me to believe the binding is not the issue here.

TypeError: Cannot read property 'off' of null
    at eval (eval at module.exports (addScript.js:9), <anonymous>:6:28424)
    at HTMLDivElement.d (eval at module.exports (addScript.js:9), <anonymous>:6:25567)
    at HTMLDivElement.e (eval at module.exports (addScript.js:9), <anonymous>:3:5222)
    at HTMLDivElement.handle (eval at module.exports (addScript.js:9), <anonymous>:6:1043)
    at HTMLDivElement.dispatch (eval at module.exports (addScript.js:9), <anonymous>:3:7537)
    at HTMLDivElement.r.handle (eval at module.exports (addScript.js:9), <anonymous>:3:5620)
    at Object.trigger (eval at module.exports (addScript.js:9), <anonymous>:4:4818)
    at HTMLDivElement.eval (eval at module.exports (addScript.js:9), <anonymous>:4:5328)
    at Function.each (eval at module.exports (addScript.js:9), <anonymous>:2:2861)
    at n.fn.init.each (eval at module.exports (addScript.js:9), <anonymous>:2:845)
    at n.fn.init.trigger (eval at module.exports (addScript.js:9), <anonymous>:4:5304)
    at e (eval at module.exports (addScript.js:9), <anonymous>:6:743)
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (ng_zone.js:262)
    at ZoneDelegate.invokeTask (zone.js:274)

the thing is this error looks to me something to do with incorrect importing?

Answer 1

I'm not sure if this is the cause but i managed to fix it by removing the AfterContentChecked implementation.

so

before:

declare var $: any;

@Component({
  selector: 'x-editable',
  template: '<a attr.id="{{widgetId}}" class="{{className}}"><ng-content></ng-content>{{model }}</a>'
})
export class XEditableComponent implements OnInit, AfterContentChecked {
  @Input() model: any = '';
  @Output() modelChange = new EventEmitter();
  @Input() Name: string = '';
  @Input() type: any = 'text';
  @Input() value: any;
  @Input() pk: any;
  @Output() change = new EventEmitter();
  public widgetId: any;
  public widgetsCounter = 0;
  private _options: any;
  constructor(private el: ElementRef) {
    this.widgetId = 'x-editable' + this.widgetsCounter++;
  }
  ngOnInit() {
    this.render();
  }
  ngAfterContentChecked() {
    if (this._options && ['type',
      'placement',
      'mode',
      'value',
      'disabled',
      'placeholder',
      'originalTitle',
      'source',
      'showbuttons',
      'template',
      'viewformat',
      'format',
      'pk',
    ].some((it) => {
      return this._options[it] !== this[it];
    })) {
      this.render();
    }
  }
  render() {
    let element = $(this.el.nativeElement);
    let options = {
      type: this.type,
      placement: this.placement,
      mode: this.mode,
      value: this.value,
      disabled: this.disabled,
      placeholder: this.placeholder,
      originalTitle: this.originalTitle,
      source: this.source,
      showbuttons: this.showbuttons,
      template: this.template,
      viewformat: this.viewformat,
      format: this.format,
      pk: this.pk,
    };
    element.editable('destroy');
    element.editable(options);
    element.on('save', (e, params) => {
      this.model = params.newValue;
      this.modelChange.emit(params.newValue);

after:

declare var $: any;

@Component({
  selector: 'x-editable',
  template: '<a attr.id="{{widgetId}}" class="{{className}}"><ng-content></ng-content>{{model }}</a>'
})
export class XEditableComponent implements OnInit {

  @Input() model: any = '';
  @Output() modelChange = new EventEmitter();

  @Input() Name: string = '';

  @Input() type: any = 'text';
  @Input() placement: any;
  @Input() value: any;
  @Input() mode: any;
  @Input() disabled: any = false;
  @Input() placeholder: any;
  @Input() originalTitle: any;
  @Input() source: any;
  @Input() showbuttons: any;
  @Input() template: any;
  @Input() viewformat: any;
  @Input() format: any;
  @Input() className: any;
  @Input() pk: any;

  @Output() change = new EventEmitter();

  public widgetId: any;
  public widgetsCounter = 0;

  private _options: any;

  constructor(private el: ElementRef) {
    this.widgetId = 'x-editable' + this.widgetsCounter++;
  }

  ngOnInit() {
    this.render();
  }

  render() {
    let element = $(this.el.nativeElement);
    let options = {
      type: this.type,
      placement: this.placement,
      mode: this.mode,
      value: this.value,
      disabled: this.disabled,
      placeholder: this.placeholder,
      originalTitle: this.originalTitle,
      source: this.source,
      showbuttons: this.showbuttons,
      template: this.template,
      viewformat: this.viewformat,
      format: this.format,
      pk: this.pk,
    };

    element.editable('destroy');
    element.editable(options);

    element.on('save', (e, params) => {
      this.model = params.newValue;
      this.modelChange.emit(params.newValue);

      let data = {};
      data['id'] = this.pk;
      data[this.Name] = params.newValue;

      this.change.emit(data);
    });

    this._options = options;
  }
}

I'm no longer getting the error...