Angular 2 & JSONP => ReferenceError : document is not defined

[Dat Nguyen]

Hello everyone,

For my internship, I've been asked to develop a mobile application (based on the website the company has been working on) with Angular 2 & Nativescript. One of the things the application must be able to do is to get notifications. On the internet browser, I just type the url to get the notifications of a specific user (so I include an access token as parameter in the url) and it works just fine : a JSON array is displayed.

For the moment I'd like to do the same on the mobile application but it doesn't work (probably because of the same-origin policy).

To solve that, I know I must use JSONP. So basically that's what I did :

1) In the root component I bootstrapped JSONP_PROVIDERS

"main.ts"

import {nativeScriptBootstrap} from "nativescript-angular/application";

import {HTTP_PROVIDERS,JSONP_PROVIDERS} from "angular2/http";

import {NS_ROUTER_PROVIDERS} from "nativescript-angular/router";

import {AppComponent} from "./app.component";

import {UserService} from "./shared/user/user.service";

import "./livesync-patch";

nativeScriptBootstrap(AppComponent, [HTTP_PROVIDERS,JSONP_PROVIDERS,NS_ROUTER_PROVIDERS]);

2) In the user service I created the method to get notifications

"user.service.ts"

import {Injectable} from "angular2/core";

import {Http, Headers,Jsonp} from "angular2/http";

import {User} from "./user";

import {Config} from "../config";

import "rxjs/add/operator/map";

(inside a class I have this method) : 

getNotifications(){

    return this._jsonp

    .request(Config.apiUrl+"icap_notification/api/notifications.json?access_token="+Config.access_token+"&callback=JSONP_CALLBACK",{method:'Get'})

    .map((res)=>res.json())

  }

3) "home.component.ts"

import {Component} from "angular2/core";

import {Router} from "angular2/router";

import {UserService} from "../../shared/user/user.service";

@Component({

selector: 'home',

templateUrl: 'pages/home/home.html',

providers: [UserService]

})

export class HomePage {

constructor(

private _userService: UserService,

private _router: Router) {

}

display() {

this._userService.getNotifications()

.subscribe(

(data) => console.log("Data :"+JSON.stringify(data)),

(error) => console.error("Error :"+JSON.stringify(error)),

()=> console.log("DONE !!!")

);

}

}

//In the template I have a button that will call the display method if I tap on it

Am I missing anything ? Because once I tap the button, none of the three situations in the subscribe happens but I have this error in the console:

ORIGINAL EXCEPTION: ReferenceError: document is not defined

 ORIGINAL STACKTRACE:

JS: ReferenceError: document is not defined

JS:     at BrowserJsonp.build (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/http/backends/browser_jsonp.js:27:20)

JS:     at Observable._subscribe (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/http/backends/jsonp_backend.js:61:47)

JS:     at Observable.subscribe (/data/data/org.nativescript.groceries/files/app/tns_modules/rxjs/Observable.js:58:33)

JS:     at Observable._subscribe (/data/data/org.nativescript.groceries/files/app/tns_modules/rxjs/Observable.js:99:28)

JS:     at Observable.subscribe (/data/data/org.nativescript.groceries/files/app/tns_modules/rxjs/Observable.js:55:33)

JS:     at HomePage.display (/data/data/org.nativescript.groceries/files/app/pages/home/home.component.js:21:14)

JS:     at AbstractChangeDetector.ChangeDetector_HomePage_0.handleEventInternal (viewFactory_HomePage:29:26)

JS:     at AbstractChangeDetector.handleEvent (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:57:29)

JS:     at AppView.triggerEventHandlers (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/linker/view.js:221:36)

JS:     at Object.eval (viewFactory_HomePage:77:100)

JS: ERROR CONTEXT:

JS: [object Object]

then I checked the first file mentioned in the error (browser_jsonp.js) : indeed there is a document variable (but I didn't code this file) and above it there is this line :

// Make sure not to evaluate this in a non-browser environment!

How can I not evaluate it ?

Thank you in advance

[Dat Nguyen]

Here you can have a better view on the files I mentioned http://plnkr.co/edit/W5bWKL7GJrQLdR1WTsyJ?p=info

[Sander Elias]

Hi Dat,

Hmm, it looks like the jsonp requests utilizes the browsers document api. However, as you are running inside nativescript, there is no such thing as a `document` to begin with. For now, jsonp is not a viable option if that is true. Just to check, can you try fetch to get your data instead off http?

Regards

Sander

[Dat Nguyen]

Thanks I'll try that but how do I do exactly ? 

[Dat Nguyen]

Correction : how do I do that exactly ? 

[Sander Elias]

Hi Dat,

I did put in a link to the fetch docs didn't I? ;)

As far as I know, fetch is available natively in nativescript. So, replace your request with fetch. Fetch is promise based, so you need to change the things a bit(have a look at the docs) but it's not a mayor change.

Regards

Sander

[Dat Nguyen]

Sorry my bad 

[Sander Elias]

Hi Dat,

No problem. I just currently miss the time to figure out the exact details for you ;)

Regards

Sander

[Dat Nguyen]

Well it doesn't work (I got a 500 error) 

and by the way thank you for the help you're giving