Angular 2 Change detection and zone in Cordova application are different

Question

We are creating an application using Cordova and Angular 2. I have the following code:

import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core'; import { Location } from '@angular/common'; declare var WL : any; @Component({ selector: 'app-store', templateUrl: './store.component.html', styleUrls: ['./store.component.css'] }) export class StoreComponent implements OnInit { status: string; document: any; constructor(private _location: Location, private changeDetector: ChangeDetectorRef, private zone: NgZone) { } ngOnInit() { var collectionName = 'people'; this.status = "JSONStore is not yet initialized!"; if(typeof WL !== "undefined" && typeof WL.JSONStore.get(collectionName) !== "undefined") this.status = "JSONStore is initialized!"; } } jsonStoreInit(){ var that = this; var collectionName = 'people'; // Object that defines all the collections. var collections = { // Object that defines the 'people' collection. people : { // Object that defines the Search Fields for the 'people' collection. searchFields : {name: 'string', age: 'integer'} } }; // Optional options object. var options = { }; /* // Optional username, default 'jsonstore'. username : 'carlos', // Optional password, default no password. password : '123', // Optional local key generation flag, default false. localKeyGen : false };*/ WL.JSONStore.init(collections, options).then(function () { // Data to add, you probably want to get // this data from a network call (eg MobileFirst Adapter). var data = [{name: 'carlos', age: 10}]; // Optional options for add. var addOptions = { // Mark data as dirty (true = yes, false = no), default true. markDirty: true }; // Get an accessor to the people collection and add data. return WL.JSONStore.get(collectionName).add(data, addOptions); }) .then(function (numberOfDocumentsAdded) { that.status = "JSONStore is initialized!"; }) .fail(function (errorObject) { // Handle failure for any of the previous JSONStore operations (init, add). alert("Error"); console.log(errorObject); }); } } 

In a web browser this works great. When jsonStoreInit () is started, it sets the status and updates the user interface to "JSONStore Initialized". In the Cordoba application, if I do not use manual change detection, it will not update the user interface. For example, see below, where I have // If IT IS NOT HERE, IT IS NOT UPDATED IN CORDOVA :

  ngOnInit() { var collectionName = 'people'; this.status = "JSONStore is not yet initialized!"; if(typeof WL !== "undefined" && typeof WL.JSONStore.get(collectionName) !== "undefined") this.status = "JSONStore is initialized!"; //IF THIS ISN'T HERE, IT WILL NOT UPDATE IN CORDOVA this.changeDetector.markForCheck(); this.zone.run(()=> function(){}); } } jsonStoreInit(){ var that = this; var collectionName = 'people'; // Object that defines all the collections. var collections = { // Object that defines the 'people' collection. people : { // Object that defines the Search Fields for the 'people' collection. searchFields : {name: 'string', age: 'integer'} } }; // Optional options object. var options = { }; /* // Optional username, default 'jsonstore'. username : 'carlos', // Optional password, default no password. password : '123', // Optional local key generation flag, default false. localKeyGen : false };*/ WL.JSONStore.init(collections, options).then(function () { // Data to add, you probably want to get // this data from a network call (eg MobileFirst Adapter). var data = [{name: 'carlos', age: 10}]; // Optional options for add. var addOptions = { // Mark data as dirty (true = yes, false = no), default true. markDirty: true }; // Get an accessor to the people collection and add data. return WL.JSONStore.get(collectionName).add(data, addOptions); }) .then(function (numberOfDocumentsAdded) { that.status = "JSONStore is initialized!" //IF THIS ISN'T HERE, IT WILL NOT UPDATE IN CORDOVA this.changeDetector.markForCheck(); this.zone.run(()=> function(){}); }) .fail(function (errorObject) { // Handle failure for any of the previous JSONStore operations (init, add). alert("Error"); console.log(errorObject); }); } 

I also see this on simple button presses to set a variable. Nothing happens in Cordoba unless I manually use change detection. I am just learning Angular 2, so any help on what I am doing wrong is much appreciated.

Answer 1

zone.js patches XHR object and another apis, for example setInterval , addEventListener , Promise so angular, is notified when something happens, and it causes the change detection itself.

It seems that the JSONStore uses a different implementation of Promise (jQuery?) Which is not fixed by zone.js, so you need to initiate the change detection manually or wrap your callbacks in zone.run .