2

I want to take data from a web site to a mobile application in a project with angular.

I found the plugin HttpClient that work's fine into browser and into Android device but, not into iOS device.

Here is the code:

data.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class DataService {

  constructor(private httpClient: HttpClient) {
    //
  }

  getDescription() {
    return this.httpClient.get('https://mywebsite.com');
  }
}

page.ts where I take the data:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../service/data.service';

@Component({
  selector: 'app-batik-motifs',
  templateUrl: './batik-motifs.page.html',
  styleUrls: ['./batik-motifs.page.scss'],
})

export class BatikMotifsPage implements OnInit {

  description$: Object;

  constructor(private dataService: DataService) {
    //
  }

  ngOnInit() {
    this.dataService.getDescription().subscribe(descriptions => this.description$ = descriptions);
  }

}

page.html where I show data:

<ion-list>

    <ion-item *ngFor="let descriptions of description$" lines="none">
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle [innerHTML]="descriptions.title.rendered"></ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <ion-row>
            <ion-col size="4">
              <img [src]="descriptions.image.guid" />
            </ion-col>
            <ion-col size="8">
              <p [innerHTML]="descriptions.content.rendered"></p>
            </ion-col>
          </ion-row>
        </ion-card-content>
        <ion-row class="cardfooter">
          <ion-col>
            <ion-button>Read More</ion-button>
          </ion-col>
        </ion-row>
      </ion-card>
    </ion-item>

  </ion-list>

I try already to add some properties on config.xml as

<access origin="*" />
<allow-navigation href="*" />
<allow-navigation href="http://localhost:8080/*" />
<allow-navigation href="https://mywebsite.com/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

And in the index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

The problem is that in the browser and in the Android device I can see data, but in iOS device I can't see anything (even if the HTTP request work's fine because I don't have errors).

Elia Perrone
  • 21
  • 2

1 Answers1

0

make sure that Your API is deployed in same domain of your angular app ,not even sub-domain.

I face the same problem and after a lot of search this is the only way worked for me

I Think it is related to this issues.

Angular GET request error, but only on safari iOS

mhfhyh
  • 1
  • 1