Patrick1870 Patrick1870 - 3 months ago 96
TypeScript Question

NgZone/Angular2/Ionic2 TypeError: Cannot read property 'run' of undefined

I'm getting this error TypeError: Cannot read property 'run' of undefined in Subscriber.js:229 and don't know why - in ionic beta 10 this code works fine... in 11 not.

import {Component, NgZone} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var io;

@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
static get parameters() {
return [NgZone];
}

zone: any;
chats: any;
chatinp: any;
socket: any;

constructor(public navCtrl: NavController, ngzone) {
this.zone = ngzone;
this.chats = [];
this.chatinp ='';
this.socket = io('http://localhost:3000');
this.socket.on('message', (msg) => {
this.zone.run(() => {
this.chats.push(msg);
});
});
}

send(msg) {
if(msg != ''){
this.socket.emit('message', msg);
}
this.chatinp = '';
}
}

Answer

Instead of injecting it like this:

static get parameters() {
  return [NgZone];
}

Why don't you do it like this:

import { Component, NgZone } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  public chats: any;

  constructor(private zone: NgZone) {

    this.chats = [];
    let index: number = 1;

    // Even though this would work without using Zones, the idea is to simulate
    // a message from a socket.
    setInterval(() => { this.addNewChat('Message ' + index++); }, 1000);
  }

  private addNewChat(message) {
    this.zone.run(() => {
        this.chats.push(message);
    });
  }
}

I'm adding private zone: NgZone as a parameter in the constructor and then I can use the run() method by using the zone variable like this:

this.zone.run(() => {
  // ... your code
});

Please take a look at this plunker using the 2.beta 11 version.

Comments