I am facing difficulties while attempting to upload a video to my server from my application. Currently, I am using the @capacitor-community/camera-preview plugin to record videos. Once the recording is complete, I get the video path, for example, “/data/user/0/com.example/cache/videoTmp_2.mp4”. However, I have encountered issues when trying to upload this video. I have tried various approaches, such as reading the file with @capacitor/filesystem and converting it to base64. Unfortunately, the conversion has not been successful and seems impossible to achieve. Additionally, when using filesystem, permission errors arise despite having the necessary permissions to implement it on Android. I haven’t tested it on iOS yet, but I assume I might face a similar problem.

My permissions in the manifest file are as follows:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

I would appreciate any guidance on how I can resolve this issue and send the video to my server using an HTTP POST request. I am eager to hear your insights!

1 post - 1 participant

Read full topic

Hi im trying to use a library to show pie graphics. I tried apexcharts wrapper for angular and doesnt work that well. It doenst throw error on console or anything but still doesnt work.

it seems like this

expected result

i just copy the sandbox example but I use in home page, not app component. should work

homepage.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import {
  ApexNonAxisChartSeries,
  ApexResponsive,
  ApexChart,
  ChartComponent,
} from 'ng-apexcharts';

export type ChartOptions = {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  responsive: ApexResponsive[];
  labels: any;
};
@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  @ViewChild('chart') chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      series: [44, 55, 13, 43, 22],
      chart: {
        width: 380,
        type: 'pie',
      },
      labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200,
            },
            legend: {
              position: 'bottom',
            },
          },
        },
      ],
    };
  }
}

homepage.html

<!--The content below is only a placeholder and can be replaced.-->
<div id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [labels]="chartOptions.labels"
    [responsive]="chartOptions.responsive"
  ></apx-chart>
</div>

homepage.scss

#chart {
    max-width: 380px;
    margin: 35px auto;
    padding: 0;
}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';

import { HomePage } from './home.page';
import { NgApexchartsModule } from 'ng-apexcharts';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    ReactiveFormsModule,
    NgApexchartsModule,
  ],

  declarations: [HomePage],
})
export class HomePageModule {}

what im doing wrong?

this is the code example, i did the same
https://apexcharts.com/angular-chart-demos/pie-charts/simple-pie/

2 posts - 2 participants

Read full topic

Hi,

when I build my components with the Stencil Angular wrapper I found out that the wrapper is not adding the component properties to the proxies.d.ts interface.

So it is not possible to use the properties in Angular together with the Angular templates.

e.g. after build I got this proxies.d.ts

//proxies.d.ts

export declare interface MyInput extends Components.MyInput {
    myChangeEvent: EventEmitter<CustomEvent<void>>;

    myInvalidEvent: EventEmitter<CustomEvent<ValidityState>>;    
}

My Component events are in the interface so that I can use it in angular directly from the component ref element.

But I would assume something like that where my component properties are also added to the interface:

//proxies.d.ts

export declare interface MyInput extends Components.MyInput {
    myChangeEvent: EventEmitter<CustomEvent<void>>;

    myInvalidEvent: EventEmitter<CustomEvent<ValidityState>>;    

    value: string;

    maxlength: number;
}

When this would be the case I could use these properties directly from the Angular ref Element (templates)

e.g.

  <my-input #myPhoneInput placeholder="Phone Number" maxlength="16">
    <span slot="label">Label</span>
    <span slot="description">Description</span>
  </my-input>

  <button type="button" (click)="callPhone(myPhoneInput.value)">Call</button>

But when I try to use the template and to get the property “value” from it myPhoneInput.value then the IDE is complaining: “Unresolved variable value”. Because the property value is not part of the component interface.

Is there any config or something like that to force stencil to add the component properties to the component interface too?

1 post - 1 participant

Read full topic

Hello, I am a React developer and I want to use capacitor, but I don’t know where to start.
Which part of the document is complete? Where are the React capacitor plugins?
Where is the training course?
If I am going to use a capacitor, then what is react ionic?
I’m really confused

2 posts - 2 participants

Read full topic

Hi Fam

This is a Ionic 7 Javascript App. Its a Sticky Notes App using Local Storage.
I am using a transpiler to generate javascript, html and other things.

Ionic via CDN.

1 post - 1 participant

Read full topic

Hi, I use the split-pane to my application and when I’m in mode desktop, I’have the menu with width 100px et when I hover the mouse on it, i wanted deploy it to width 270px with an animation transition. So it work but I don’t arrive to have an animation. How can I do please?

1 post - 1 participant

Read full topic

I have a page of <a> links that all open PDF documents. On web browsers, these all have the target="_blank" so they open in a new tab in the default PDF viewer. This works on Android too (they open in whatever PDF viewer app is defined in settings) however on iOS they open directly in my app with no back button or other controls to get out of the PDF view without closing and re-opening the app.

I’ve seen a few posts online that recommend setting target="_system" to specify opening in the system browser which works as expected on Android and normal browsers, but the link does nothing on iOS.

Any suggestions?

1 post - 1 participant

Read full topic

1. Capacitor calls method on native plugin
2. I want to show Compose (style with Material3 Theme)

@PluginMethod
fun doSth(call: PluginCall) {
// How to display a custom Composable?
call.resolve()
}

1 post - 1 participant

Read full topic

I need to follow where on screen device finger position is when text selection change. On iOS touchmove and selectionchange works together fine, but Android touchmove not working when selectionchange. Maybe someone know how to fix this, any idea?

“@ionic/angular”: “^7.5.2”

1 post - 1 participant

Read full topic

Hello,

We currently have an app utilizing ionic 7. It is a fairly complex app with multiple pages, Bluetooth interactions with a device, cloud interactions to get/send configuration data/log data.

I have been asked if it was possible to create some sort of “wizard” that would appear on each page as you go through connecting over Bluetooth to a device and configuring it. The “wizard” would overlay the main page and follow a complex flow diagram. As the user goes from page to page they would get information and do configuration and input this input this “wizard” as they go until they are done.

I really am not sure how to do this and have not seen any other apps do somethings similar.

Has anyone does something similar or does this just not seem feasible?

Thanks for any input!

Brent

2 posts - 2 participants

Read full topic

Hey guys,

i am currently creating an Ionic 7 + Capacitor project with Vanilla JS and Lit for WebComponents.
I already tried to implement a tab based navigation with the Ionic-Router.
My problem is that i dont understand how to navigate to sub-pages from an individual tab.
I understand that i must define nested routes like they did in the example project (ionic-stencil-conference-app/src/components/app-root/app-root.tsx at 20a33ba2e469399420613daadff356999d0060fb · ionic-team/ionic-stencil-conference-app · GitHub)

Currently nothing is shown when i start the app.
My current approach is:
My app root that is rendered in the index.html

@customElement('app-root')
class AppComponent extends LitElement {
    static styles = [sharedStyle, componentStyle];

    @property({type: String}) headerTitle?: string = "Test"

    @provide({context: courseServiceContext})
    courseService = new CourseService();

    constructor() {
        super();
        console.log("init")
        const port = location.protocol === 'https:' ? 3443 : 3000;
        httpClient.init({
            baseURL: `${location.protocol}//${location.hostname}:${port}`,
            apiPath: 'api',
            filesPath: 'files'
        });
    }

    render() {
        return html`
            <ion-app>
                <ion-router use-hash=false>
                    <ion-route component="tabs-component">
                        <ion-route url="/home" component="tab-home"></ion-route>
                        <ion-route url="/courses" component="tab-courses">
                            <ion-route component="courses-overview"></ion-route>
                        </ion-route>
                        <ion-route url="/books" component="tab-books">
                            <ion-route component="books-overview"></ion-route>
                            <ion-route url="/book" component="book-details"></ion-route>
                        </ion-route>
                        <ion-route url="/lendings" component="tab-lendings">
                            <ion-route component="lendings-overview"></ion-route>
                        </ion-route>
                    </ion-route>
                </ion-router>
            </ion-app>
        `;
    }
}

My custom tabs component:

@customElement('tabs-component')
class TabsComponent extends LitElement {


  protected render() {
    return html`
      <ion-tabs>
        <ion-tab tab="tab-home" component="home-overview"></ion-tab>
        <ion-tab tab="tab-courses">
          <ion-nav></ion-nav>
        </ion-tab>
        <ion-tab tab="tab-books">
          <ion-nav></ion-nav>
        </ion-tab>
        <ion-tab tab="tab-lendings">
          <ion-nav></ion-nav>
        </ion-tab>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="tab-overview">
            <ion-icon name="home-outline"></ion-icon>
            <ion-label>Start</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="tab-courses">
            <ion-icon name="school-outline"></ion-icon>
            <ion-label>Kurse</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="tab-books">
            <ion-icon name="book-outline"></ion-icon>
            <ion-label>Bücher</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="tab-lendings">
            <ion-icon name="library-outline"></ion-icon>
            <ion-label>Leihe</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
        `;
  }
}

The components like home-overview are also WebComponents i defined with Lit.

Do you guys know what could be wrong or what i could try to do?
Thanks in advance!

1 post - 1 participant

Read full topic

Hi, community!
How get assets local on capacitor/ios with HttpClient Angular?
URL in image
Environment:

• Capacitor 5
• Angular 16

  public myGet(
    url: string,
    hideLoader = false,
    errorHandler?: (err: any, caught: Observable<any>) => ObservableInput<{}>,
    responsive = null
  ): Observable<any> {
    if (!hideLoader) {
      this.events.publish('loading:start');
    }
    return this.httpClient.get(url, options).pipe(
      map((response) => response),
      catchError(errorHandler ? errorHandler : this.handleError),
      finalize(() => {
        if (!hideLoader) {
          this.events.publish('loading:finish');
        }
      })
    );

I’m Try transform url adding: capacitor://localhost:/assets…, but notworking
Try Using CapacitorHttp but have this errors:

1 post - 1 participant

Read full topic

Hi, I’m new to Ionic. I’m a software developer and already studied all Angular stuff.
Now I just need to get way more familiar with the UI Components and how to use them, or templates, etc.
I am not interested in anything teaching how to do the coding or javascript, etc, since that part is easy for me and already out of the way.

I find the UI components kind of overwhelming since I can’t even visualize it in my mind first.

It would be nice just to find an actual tool with some sort of drag and drop features that spit out angular template html. After awhile I wouldn’t need it.

1 post - 1 participant

Read full topic

Hello,

I use an API to get the data and to log the user.

To get data, I use the fetch method but now, I want to change the domain name of the API.
(For example: currently myapi.org and I want to use myapi.com).

I have prepared a few month ago a way to detect the moment to switch to the new domain name.

Problem: When I target the new domain, I have an error with the fetch with the CORS:

Access to fetch at 'https://myapi.com/checkdomain' from origin 'https://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I know I can fix by adding cache: 'no-cache' in the params of the fetch method but is there a way to accept the new domain without changing anything in the app code (only in the server side)?

Thanks for your help,
Loïc

1 post - 1 participant

Read full topic

I have an Ionic Angular Capacitor app working good in web and in android build, but in Ios simulator not working as expected and I can’t put my hand on the problem. I have http request to login which sends username and password as data:

this._userService.login(this.Username,this.Password)
.subscribe({
  next: (authenticateResult: LoginResponseModel) => {
    console.log('result ', authenticateResult); // line#1
    // extra code to validate the response
    this._router.navigateByUrl('/tabs', { replaceUrl: true }); // line#2
   
},
error: (err) =>{
  console.error("something happened ..") // line#3
  console.error("error ",err); // line#4
}

when debugging with Ios simulator and safari web inspector: http request returns status code 200 and the expected response returned. line#1 is reached and put in console log line#2 is never executed then line #3 is executed line#4 is executed and prints error as: TypeError: Argument 1 (‘blob’) to FileReader.readAsText must be an instance of Blob

and if password contains @ character it is sent to the server as %2540 so the login response never returns true
I suspect xcode not able to convert response to js so I removed all the code in subscribe next part, but it still raise an error. The weird thing that it enters next part and then jump into error part in subscribe, also the error message shows dealing with blob and files which is not the case here.

1 post - 1 participant

Read full topic

Hi, I have been struggling with this issue for a while now and I simply have no clue what is going on.

What I am trying:

1. Build ionic app
2. Sync app
3. Open in Xcode
4. Select any iPhone simulator
5. Run app

The result is a blank app that never opens. Just a white screen. If I do the same but select an iPad simulator it works fine. I have also tried getting the .ipa file and running it on BrowserStack. Running on real devices I get the same result. Blank screen on iPhones but works fine on iPads. Also worth mentioning is that everything works fine in Android Studio/real devices.

This is what I see in the Xcode logs:

KeyboardPlugin: resize mode - native

Loading app at capacitor://localhost…

• [I-ACS025031] AdMob App ID changed. Original, new: (nil), ca-app-pub-7440893279949308~1633074503

• [I-ACS023007] Analytics v.101700000 started

• [I-ACS023008] To enable debug logging set the following application argument: -APMAnalyticsDebugEnabled (see http://goo.gl/RfcP7r)

Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

Updating selectors after delegate addition failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}

• [I-ACS800023] No pending snapshot to activate. SDK name: app_measurement

• [I-ACS023012] Analytics collection enabled

WebView loaded

Googling these errors there were some answers in regards to AdMob, but nothing useful. I also tried making a tester project that was just the AdMob initialization and ability to call the test ads, and that works fine. That app isn’t blank, and the ad setup/functionality works just fine.

Does anyone have any clue as to what might be going on here? Any help is greatly appreciated.

Specs:
Mac Mini
Apple M2
MacOS: Sonoma 14.1.1
Xcode version: 15.1

1 post - 1 participant

Read full topic

hello I’m trying to work on my project so i wrote the required commands, which are:
ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file --save
but they arent working especially the second one.
BTW im using ionic 7

1 post - 1 participant

Read full topic

Hi there

We’re running:

Ionic Angular 7.6.2
Angular 16.2.12

We have (click) events on some ion-inputs to launch a modal like this:

<ion-input class="modal-input" readonly="true" label="Delivery date" labelPlacement="stacked" fill="outline" (click)="presentDateTimePickerModal()"></ion-input>

We’ve recently switched to the fill="outline" style.

We’ve found a strange behaviour. If you click on the edge of the ion-input, where the new fill outline border shows, it launches the (click) event twice! Clicking in the middle of the ion-input fires once as expected.

See here on click area:

Is this a known bug? Any way to resolve and keep using the ion-input fill=outline?

Thanks

Dave

1 post - 1 participant

Read full topic

Hi Team,
I want to publish my shared method in the library which is build by stenciljs then other developer can reuse it.

I research on stencilj website and forum, but not find any topic.
With stackoverflow, i found few similar issue:

After export my util in index.ts, it’s build successfully.

export * from './components';
export * from './components/my-util';

But when importing my-util in other project to reuse it. I got the strange error

import { myUtil } from 'my-library';

Error: Module not found: Error: Package path . is not exported from package ...

Do we have any guideline to export set of shared method/class …?
How can i fix above error?
Thank for help.

1 post - 1 participant

Read full topic

I need to retrieve current selected language of the user’s keyboard. Is it possible to do so using Swift + Ionic? If yes, please, share your solution.

1 post - 1 participant

Read full topic