How import @capacitor/http in ionic 7 components standalonev

Ionic Framework Ionic Angular
1

I’m doing tests with angular standalone components in ionic,
I try to import http from capacitor, but I can’t read it from the code

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Http } from '@capacitor/http';
import { map } from 'rxjs/operators';

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
    standalone: true,
    imports: [IonicModule, CommonModule, FormsModule]
})
export class HomePage implements OnInit {

    constructor(private http: Http) { }

    ngOnInit() {
        this.getUsers().subscribe(res =>{
            console.log(res);
            
        })
    }

    getUsers(){
        return this.http
        .get("../../../assets/files/user.json")
        .pipe(
            map((res: any) => { 
                return res.data;
            })
        )
    }

}

image
image1316×944 29.8 KB

empty documentation

image
image1514×924 79.6 KB

any suggestions?

2

With Angular I can do it without problems, what would be the difference?

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
// import { Http } from '@capacitor/http';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
    standalone: true,
    imports: [IonicModule, CommonModule, FormsModule, HttpClientModule]
})
export class HomePage implements OnInit {

    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.getUsers().subscribe(res =>{
            console.log(res);
        })
    }

    getUsers(){
        return this.http
        .get("../../../assets/files/user.json")
        .pipe(
            map((res: any) => { 
                return res.data;
            })
        )
    }

}

image
image991×152 7.24 KB

1 Like
3 
import { CapacitorHttp } from '@capacitor/core';

// Example of a GET request
const doGet = () => {
  const options = {
    url: 'https://example.com/my/api',
    headers: { 'X-Fake-Header': 'Fake-Value' },
    params: { size: 'XL' },
  };

  const response: HttpResponse = await CapacitorHttp.get(options);

  // or...
  // const response = await CapacitorHttp.request({ ...options, method: 'GET' })
};

for demo /// Ionic 6 Angular : The Capacitor Http API - YouTube

1 Like
5

Thanks this was helpful for me as I was only trying to import HttpClient and not HttpClientModule.

2 Likes