CODEWITHSUNDEEP
javascriptangulartypescriptnativescript
mfrachet
mfrachet

Reputation: 8932

Nativescript and angular 2 Http service

I m learning native apps through javascript technologies, and I m trying to build a simple application using the pokemon api available only.

What I've done

I've created a simple component that list some pokemons, resulting from an http response :

import {Component, OnInit} from '@angular/core';
import 'rxjs/Rx';
import {Http} from '@angular/http';

@Component({
  selector:'pokemon-list',
  templateUrl: 'components/pokemonList/pokemonList.html'
})
export default class PokemonList implements OnInit{

  pokemons: Array<any>;

  constructor(private http:Http){
    this.pokemons = [];
  }

  ngOnInit() {
    this.getRemote(); // I pass on here
  }

  getRemote(){
    this.http
      .get('https://pokeapi.co/api/v2/pokemon/') // Throws the weird error
      .map(res => res.json())
      .subscribe(res => {
        this.pokemons = res.results;
      });
  }
}

My problem

When I start my application, I'm getting a weird error 

Error in app.component.html:4:4 caused by: null is not an object (evaluating '_angular_platformBrowser.__platform_browser_private__.getDOM().getCookie')

I've to notice that this error only happens if the getRemote body is set with my http call. Moreover, when I set a default pokemon in my pokemon list, with the API result format like {name: 'Name', url: 'url}, the app is working and the pokemon well displayed.

If I remove the code like following, the app is working. It seems that I'm missing something with the Http module right there :

getRemote(){
    // App is running without the Http call
  }

NB : I'm using TS 2+ && I've set the Http module in my current module using :

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import {HttpModule} from '@angular/http';
import { NativeScriptModule } from "nativescript-angular/platform";
import PokemonList from './components/pokemonList/pokemonList.component';
import PokemonItem from './components/pokemonItem/pokemonItem.component';
import { AppComponent } from "./app.component";

@NgModule({
    declarations: [
      AppComponent,
      PokemonList,
      PokemonItem
    ],
    bootstrap: [AppComponent],
    imports: [
      NativeScriptModule,
      HttpModule
    ],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

Any idea of what I'm doing wrong ?

Thanks for your help

Upvotes: 2

Views: 1246

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

In your NgModule instead of HttpModule, you should import the NativeScript wrapper NativeScriptHttpModule as shown here https://github.com/NativeScript/nativescript-sdk-examples-ng/blob/master/app/http/http-examples.module.ts#L32

import { NativeScriptHttpModule } from "nativescript-angular/http";
...
@NgModule({
    imports: [
        NativeScriptHttpModule,
        ...

NativeScriptHttpModule is a NativeScript wrapper of Angular’s HttpModule, a module that declares all of Angular’s HTTP-based services...

The usage of wrapper in NativeScript was needed as NativeScript does not "understand" of the DOM web specific properties used in Angular

Upvotes: 2

Related Questions