I am currently learning about native apps using JavaScript technologies and I am attempting to create a simple application utilizing the Pokemon API.
Progress So Far
I have developed a basic component that shows a list of pokemons retrieved 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(); // Here is where I run into issues
}
getRemote(){
this.http
.get('https://pokeapi.co/api/v2/pokemon/') // This is causing a strange error
.map(res => res.json())
.subscribe(res => {
this.pokemons = res.results;
});
}
}
Issue Encountered
Upon launching my application, I encounter a peculiar error:
Error in app.component.html:4:4 caused by: null is not an object (evaluating '_angular_platformBrowser.__platform_browser_private__.getDOM().getCookie')
Note that this error only occurs when I make the http call within the getRemote function. Interestingly, if I manually set a default pokemon in the list with the format {name: 'Name', url: 'url}, the app functions correctly and displays the pokemon.
If I remove the code as shown below, the app works fine. It seems like there might be some issue with the Http module:
getRemote(){
// App runs without the Http call
}
NB: I am using TS 2+ and have included the Http module in my current module using the following:
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 insights on what could be going wrong here?
Appreciate your assistance