Telerik Everlive API Nativescript Angular2 Setup

Question

I am trying to set up everlive api for my {N} ng2 app and I have the following set up

const Everlive = require('./utils/everlive.all');

@Component({
    selector: "main",
    template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent implements AfterViewInit {
    el: any;

    constructor(private utils: Utils) { }

    ngAfterViewInit() {
        this.el = new Everlive({
            appId: Config.telerikAppId,
            offlineStorage: true,
            offline: {
                syncUnmodified: true,
                typeSettings: {
                    "ContentTypeName": {
                        "autoGenerateId": false
                    }
                },
                storage: {
                    provider: Everlive.Constants.StorageProvider.FileSystem
                }
            },
            syncStart: this.startSync,
            syncEnd: this.endSync
        });

        // start 
        this.el.online();

        // track
        connectivity.startMonitoring((newConnectionType: number) => {
            switch (newConnectionType) {
                case connectivity.connectionType.none:
                    console.log("Connection type changed to none.");
                    this.goOffline();
                    break;
                case connectivity.connectionType.wifi:
                    console.log("Connection type changed to WiFi.");
                    this.goOnline();
                    break;
                case connectivity.connectionType.mobile:
                    console.log("Connection type changed to mobile.");
                    this.goOnline();
                    break;
            }
        });
    }

    startSync() {
        this.utils.showLoader();
    };

    endSync(syncInfo) {
        this.utils.hideLoader();
        alert('Sync with server complete');
        console.log(syncInfo);
    };

    goOffline() {
        this.utils.confirmBox('No internet connection, switch to offline mode?', '', 'Yes', 'No')
            .then((result) => {
                if (result) {
                    this.el.offline();
                } else {
                    this.logout();
                }
            });
    }

    goOnline() {
        this.utils.confirmBox('Internet connection detected, switch to online mode and sync data?', '', 'Yes', 'No')
            .then((result) => {
                if (result) {
                    this.utils.showLoader();
                    this.el.online();
                    this.el.sync();
                } else {
                    this.logout();
                }
            });
    }

    logout() {

    }
}

When I launch the app, navigate between a bunch of states hoping that data is being cached. Now, I turn off the WiFi on my laptop expecting it to pull the data from the filesystem which it has cached but instead I see an error from zone.js

Unhandled Promise rejection: Response {_body: Error: The Internet connection appears to be offline., status: 200, ok: true, statusText: "", headers: Headers…} ; Zone: <root> ; Task: Promise.then ; Value: Response {_body: Error: The Internet connection appears to be offline., status: 200, ok: true, statusText: "", headers: Headers…} undefined

this is what I see when I log the response when the sync is complete

Object {syncedItems: undefined, syncedToServer: 0, syncedToClient: 0, failedItems: undefined, error: undefined}

Answer 1

it seems that the everlive SDK does not know that you don't have internet connection and tries to make a request.

check this gist with some sample initialization code https://gist.github.com/anonymous/0d94dc664ed83004e9a349bd5f9eabd0