CODEWITHSUNDEEP
htmljsonionic-frameworkexternal
Daniele Squalo
Daniele Squalo

Reputation: 55

Ionic 2: loading external content inside the app

I'm new to Ionic. My typescript file is like this:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

import { NavController } from 'ionic-angular';

@Component({
 selector: 'page-about',
 templateUrl: 'about.html'
})
export class AboutPage {
   mypage: any;

  constructor(public navCtrl: NavController, public http: Http) {
        this.http
  .get('http://localhost/xampp/')
  .map(response => response.text())
  .subscribe(html => this.mypage = html);
  }
}

Any URL, even in the same source, leads to an error like:
EXCEPTION: Response with status: 0 for URL: null The error appear on either ionic serve in my pc or my phone. What am i supposed to do to solve? I thought to load it as component too "templateUrl: 'somehtml'", but in future i'd like to load some json data in my apps. Thank you.

Upvotes: 0

Views: 1129

Answers (1)

Daniele Squalo
Daniele Squalo

Reputation: 55

I solved this myself. This was a CORS issue, but i found almost no info about it on Ionic 2. Answer lies in ionic.config.json file. You gotta add these lines to the json item:

"proxies": [
    {
        "path": "/virtualfolder",
        "proxyUrl": "http://www.externalsite.com"
    }
  ]

Now comes the real issue. Enough? No, of course. Back to my code, i should have done this:

this.http
  .get('virtualfolder/someresource.html')
  .map(response => response.text())
  .subscribe(html => this.mypage = html);

Ionic maps your external resource in the path you specified. After noticing that, i had to solve some more issues that didn't have something to do with that, but it did what i wanted in the end, and i noticed how awesome is the anti-XSS policy. Hope i'll help someone.

Upvotes: 1

Related Questions