Hi All

I have recently updated my ionic app to version 7, but when i transfer the www folder to my website/webserver, I am getting the errors on the console.

GET https://myappa.app/web/runtime-es2015.js net::ERR_ABORTED 404 (Not Found)
myappa.app/:27                
        GET https://myappa.app/web/polyfills-es2015.js net::ERR_ABORTED 404 (Not Found)
myappa.app/:27               
        GET https://myappa.app/web/main-es2015.js net::ERR_ABORTED 404 (Not Found)

It seems these files are missing, but when i run the app locally on my PC using ionic serve It seems to be working well.

1 post - 1 participant

Read full topic

I’ve initiated a new Angular project in VS Code, but it seems that the app module.ts component isn’t being created within the project.

1 post - 1 participant

Read full topic

Everytime i describe a bug, i get asked to show it in a reproduceable project Problem is i have no clue how to make a stackblitz that displays as a mobile app. Is this possible and does anyone have a basic app I can piggy back off to help describe my bugs?
Thanks

2 posts - 2 participants

Read full topic

Hi! I’m running Ionic 7 react (@ionic/core@7.7.0 @ionic/react@7.7.0 react@18.2.0) and running into a problem specifically on mobile. This can be replicated on desktop using Chrome developer tools and choosing an android device to emulate like “Samsung Galaxy S8+”. For some reason this does not happen when the app is running in normal browser mode.

Code:

const TestPage: React.FC = () => {
    
    const [ myValue, setMyValue ] = useState("original value");
    
    const submitForm = (e: any) => {
        console.log("submitForm with value: ", myValue);
    }

  return (
    <IonPage>
        <IonInput value={ myValue } onIonChange={ (e) => setMyValue(e.detail.value) } />
        
        <IonButton onClick={submitForm}>Fake submit</IonButton>
    </IonPage>
  );
};

I type in “new value” in the text box and click “Fake Submit” button (while the cursor is still bliking in the text box.

What’s logged:

submitForm with value: original value

According to this stackoverflow post ( javascript - React: potential race condition for Controlled Components - Stack Overflow ) this should not be happening.

Is there an elegant way to fix this without having to swtich the onIonChange to onIonInput? I feel like onIonInput would be an overkill since it keeps doing the update anytime you put a new character in there (yes, you can debounce, but won’t debounce also cause the delay at the end allowing the race condition to happen)

1 post - 1 participant

Read full topic

Hi everyone!

How can I make camera preview like in telegram, i.e. make it in a separate element? I used the plugin
@capacitor-community/camera-preview and next.js framework

The isBack: true solution doesn’t work for me because it only works on android

1 post - 1 participant

Read full topic

Hey guys

I’m struggling with the new ion-datetime in changing the dates to match my local timezone. The datepicker expects UTC time to be passed into it and then some manipulation has to take place when displaying the date on the app.

Just wondering if someone could show how they do it with a stackblitz assuming they are working in a timezone other than UTC?

thanks

1 post - 1 participant

Read full topic

I’ve just switched to ionic v7 and as part of this change i was forced to start using the capacitor filesystem plugin instead of the cordova one.

It seems the app crashes if I upload a file greater than 25mb. It also crashes if I upload a files 20mb + 10mb + 10mb at the same time.

Is this common and is there a way around it?

1 post - 1 participant

Read full topic

hi, i want to ask about IonNav after i read documentation ion-nav: Nav View Component for Ionic Framework Apps

i try to follow for schema crud
first i create tab 1 for define ionNav like this “<IonNav root={() => }>” and in list template have button add like this “<IonNavLink routerDirection=“forward” component={() => }>” and my component just change to add data when i click button add and my question how to back to List data page after submit data i just try with history push and return IonNav and IonNavLink but not working

my page add data like this

import {
  IonContent, 
  IonList,
  IonInput,
  IonItem,
  IonLabel,
  IonButton,
  IonPage,
  IonNav,
  IonNavLink,
  NavContext,
  NavCustomEvent,
  IonBackButton,
  IonRouterContext
} from '@ionic/react';

import React, {useState, useContext} from 'react';
import {  BrowserRouter as Router, Route,RouteComponentProps, useHistory } from 'react-router-dom';
import DynamicHeader from './Header';
import axios from 'axios';
import List from './List';
// import { useNavigate } from 'react-router-dom';

const Add: React.FC<RouteComponentProps> = () => {
  const history = useHistory();
  const { navigate } = useContext(NavContext);
  const token = localStorage.getItem('token');
  // const navigate = useNavigate();
  const [formData, setFormData] = useState({
    name: '',
    description: ''
  });

  const config = {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'multipart/form-data'
    }
  };
  const routerContext = useContext(IonRouterContext);
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
     ???? how to back list page???

    } catch (error) {

    }
  };
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  return (
    <>
      <IonPage>
        <DynamicHeader title="ADD Data" />
        <IonContent class="ion-padding">
          <IonList>
            <form onSubmit={handleSubmit}>
              <IonItem>
                <IonLabel position="floating">Name</IonLabel>
                <IonInput type="text" name="name" value={formData.name} onIonChange={handleChange} required></IonInput>
              </IonItem>
              <IonItem>
                <IonLabel position="floating">Description</IonLabel>
                <IonInput type="text" name="description" value={formData.description} onIonChange={handleChange} required></IonInput>
              </IonItem>
              <IonButton type="submit">Submit</IonButton>
            </form>
          </IonList>
        </IonContent>
      </IonPage>

      <IonNavLink routerDirection="forward" component={() => <List />}></IonNavLink>
    </>
  );
}

export default Add;

Thank you.

1 post - 1 participant

Read full topic

I need to re-engineer my project, to create libraries to reuse in new projects. I created the various libraries, but I need to debug to integrate them correctly into the new app (ionic+angular+capacitor). Do you have a tutorial for creating workspaces with several libraries and one or more apps?

1 post - 1 participant

Read full topic

Hello, I’m not sure if I am in the right category, but I have a question about security configuration.

For the security team at the company where I work, I need to set the following properties to false:

android:exported="false" (inside <activity>)
android:grantUriPermissions="false" (inside <provider>)

The problem with setting android:exported to false is that it’s no longer possible to debug the application using adb. Does anyone know a way to overcome this issue?

Also, setting android:grantUriPermissions to false crashes the app on startup. Does anyone know how to set it to false and still be able to grant specific permissions? Or only allow the Ionic app to have permissions to access the Android native files.

Current working AndroidManifest file:

<?xml version='1.0' encoding='utf-8'?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
      android:networkSecurityConfig="@xml/network_security_config"
      android:allowBackup="false"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
        <activity
                android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
                android:exported="true"
                android:label="@string/title_activity_main"
                android:launchMode="singleTask"
                android:name=".MainActivity"
                android:theme="@style/AppTheme.NoActionBarLaunch">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <provider android:authorities="${applicationId}.fileprovider"
                  android:exported="false"
                  android:grantUriPermissions="true"
                  android:name="androidx.core.content.FileProvider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
        </provider>
    </application>
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.USE_BIOMETRIC" />
</manifest>

Matthieu

1 post - 1 participant

Read full topic

Hello,

I cant find any information regarding best practices on the scenario im facing,

(Im using the @capacitor/push-notifications plugin)

In my app im using silent push Data Messages sent to certain topics for live user-visible data updates on the screen (changing texts, etc), in addition to the main use of push notifications for displaying push messgaes to the user.

so I have a main listener in a service for general incoming notifications. and in addition I want to have other listeners on certain components that will only listen to specific topics, in order to update visible data on the current screen. and when the screen is destroyed the listeners should stop.

my question is, what would be best practice:

a) should I use a main listener in a service and then by conditioning incoming messages that only belong to a certain topic I would use an observable for example to pass that information to other components listening to that observable?

b) or should I listen generally once in the service, and in every other component that needs to recieve data from certain topics, I will listen again and condition the incoming messages there. will that not init the listener several times if i come in and out of that componenet, do I need to remove that certain listener on component destruction? if so how should I do it as I do not see an option for that in the capacitor plugin. is there a memory leak problem with those listeners?

thanks for any feedback, sorry if the question is not relevant somehow.

1 post - 1 participant

Read full topic

Hello, I have an react capacitor app,
where i have to use hostname as prod url to avoid CORS issues like https://en.wikipedia.org,
So updated capacitor.config.ts to

  appId: 'io.ionic.starter',
  appName: 'myApp',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    hostname:'en.wikipedia.org'
  }
};

My app also loads url(United States - Wikipedia) in iframe ,
Issue : In iframe instead of page, it is reloading the same app again as domain matches
const config: CapacitorConfig = {
appId: ‘io.ionic.starter’,
appName: ‘myApp’,
webDir: ‘dist’,
server: {
androidScheme: ‘https’,
hostname:‘en.wikipedia.org’
}
};

How to address this issue

when using in localhost:8100 or any other hostname

in actual android

3 posts - 2 participants

Read full topic

Hey! Is it possible to add icon animation before app starts? (Telegram i.e. https://youtube.com/shorts/tzw6I1BpRa0)

1 post - 1 participant

Read full topic

This seems to apply to both iOS and Android.

After leaving my app closed for a while ( a day or so ) the app seems to go into background mode and when it is opened again it shows the splash screen again and takes a while to start up.

This is fine (although slow) but on some devices it has an error as all the local data / variables have been cleared (except the logged in firebase user).

This causes an error in the app which I can’t replicate as it does not appear to happen on my devices.
It may be the device is clearing the data to conserve memory on devices with low storage?

Is there a way to replicate this issue by forcing my app into background mode?
I need to test recovering from this state. I have the user so it should be possible I just need to test it.

1 post - 1 participant

Read full topic

When I run ngrok, it generates the URL. However, when I open the console in that url, it creates a loop with this error message. Does anyone have an idea on how to solve it?

1 post - 1 participant

Read full topic

I have ionic project with the following info

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 7.8.2
   @angular-devkit/build-angular : 17.3.2
   @angular-devkit/schematics    : 17.3.2
   @angular/cli                  : 17.3.2
   @ionic/angular-toolkit        : 9.0.0

Cordova:

   cordova (Cordova CLI) : 11.1.0
   Cordova Platforms     : browser 6.0.0, ios 6.3.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 25 other plugins)

System:

   ios-sim : 8.0.2
   NodeJS  : v18.19.1 (/usr/local/bin/node)
   npm     : 10.2.4
   OS      : macOS Unknown
   Xcode   : Xcode 15.3 Build version 15E204a

Recently, I upgraded the Xcode version to the latest version and upgraded angular and Jnode.

I installed all my packages from the beginning but, when I installed google plus my project crashed with the following error

** BUILD FAILED **


The following build commands failed:
	Ld /Users/ABC/newapp/platforms/ios/build/emulator/newapp.app/newapp normal (in target 'newapp' from project 'newapp')
(1 failure)
xcodebuild: Command failed with exit code 65

The command I run:

ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.535xxxxxx-djn1xxxxxxxxx --variable WEB_APPLICATION_CLIENT_ID=535xxxxxxx-djn1xxxxxxx.apps.googleusercontent.com

podfile

# DO NOT MODIFY -- auto-generated by Apache Cordova
source 'https://cdn.cocoapods.org/'
platform :ios, '12.0'
use_frameworks!
target 'newapp' do
	project 'newapp.xcodeproj'
	pod 'GoogleSignIn', '~> 5.0.2'
	pod 'GoogleUtilities', '~> 6.7'
end

I have checked Xcode Workplace, many errors are showing. looks like the Google Plus package crashed my project.
The same things happened when installing Facebook4, Fcm, and Filetransver plugins.

Am I missing something?
Please help

2 posts - 2 participants

Read full topic

Can anyone give me any idea about the Ionic 5 table format? I have read all the documents on the Ionic site (ion-grid: Display Grids for Mobile-First Custom App Layout). But I didn’t get any clues. I am explaining it. If the table cell header has blank data or big data, then column alignment is breaking if I make it by ion-grid, ion-row, ion-col. For the common table, alignment is not breaking as usual. What is the correct format to build a basic table format by Ionic 5?

2 posts - 2 participants

Read full topic

I’m developing an app that requests documents from a CouchDB server, when running the same code using ionic serve from a computer, it works, when using inside Android (On my physical cellphone), I get a fail to fetch.

My CouchDB server is running using self-signed certificate.
My server has CORS enabled:

pnpm install -g add-cors-to-couchdb
add-cors-to-couchdb http://192.168.1.27:5984 -u admin -p xxxx

My code uses PouchDB

    this.rdb = new PouchDB('https://192.168.1.2:6984/employees',
    {
      auth: {
        username: "xxxx",
        password: "xxxx",
      },
    });

Inspecting the calls from the Android app I get this error message:

When I open the same url (https://192.168.1.2:6984) inside a browser using my cellphone, it works.

My App has many settings:
AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:networkSecurityConfig="@xml/network_security_config" >

    <application
        android:usesCleartextTraffic="true"
        tools:ignore="GoogleAppIndexingWarning">
        <uses-library
            android:name="org.apache.http.legacy"
            android:required="false" />
    ...
    </application>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">192.168.1.27</domain>
    </domain-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
        </trust-anchors>
    </base-config>
    <debug-overrides>
      <trust-anchors>
          <certificates src="@raw/couchdb"/>
      </trust-anchors>
  </debug-overrides>
</network-security-config>

I renamed and copied my certificate from couchdb.pem to:
android/app/src/main/res/raw/couchdb.crt
and to:
android/app/src/main/assets/couchdb.crt

capacitor.config.ts

...
  server: {
    androidScheme: 'https',
    allowNavigation: ['https://192.168.1.27:6984/employees']
  }
...

CouchDB Server settings

local.ini

[ssl]
enable = true
cert_file = /etc/couchdb/cert/couchdb.pem
key_file = /etc/couchdb/cert/privkey.pem

I generated my certificate using:

openssl req -newkey rsa:2048 -nodes -x509 -keyout privkey.pem -out couchdb.pem -days 1095 -addext "subjectAltName = IP.1:192.168.1.27"

I’m running CouchDB inside docker, the log prints an error of certificate unknown, but I can access the server using https if I run my app using ionic serve in my computer:

Attaching to couch_couchserver_1
couchserver_1  | [info] 2024-03-31T03:02:46.560859Z nonode@nohost <0.248.0> -------- Preflight check: Checking For Monsters
couchserver_1  | 
couchserver_1  | [info] 2024-03-31T03:02:46.561748Z nonode@nohost <0.248.0> -------- Preflight check: Asserting Admin Account
couchserver_1  | 
couchserver_1  | [info] 2024-03-31T03:02:46.563687Z nonode@nohost <0.248.0> -------- Apache CouchDB 3.3.3 is starting.
couchserver_1  | 
couchserver_1  | [info] 2024-03-31T03:02:46.563729Z nonode@nohost <0.249.0> -------- Starting couch_sup
couchserver_1  | [notice] 2024-03-31T03:02:46.569034Z nonode@nohost <0.103.0> -------- config: [admins] admin set to '****' for reason nil
couchserver_1  | [info] 2024-03-31T03:02:46.623235Z nonode@nohost <0.248.0> -------- Apache CouchDB has started. Time to relax.
couchserver_1  | 
couchserver_1  | [notice] 2024-03-31T03:02:46.628526Z nonode@nohost <0.345.0> -------- rexi_server : started servers
couchserver_1  | [notice] 2024-03-31T03:02:46.629507Z nonode@nohost <0.349.0> -------- rexi_buffer : started servers
couchserver_1  | [notice] 2024-03-31T03:02:46.667987Z nonode@nohost <0.380.0> -------- mem3_reshard_dbdoc start init()
couchserver_1  | [notice] 2024-03-31T03:02:46.670659Z nonode@nohost <0.382.0> -------- mem3_reshard start init()
couchserver_1  | [notice] 2024-03-31T03:02:46.670694Z nonode@nohost <0.383.0> -------- mem3_reshard db monitor <0.383.0> starting
couchserver_1  | [notice] 2024-03-31T03:02:46.672077Z nonode@nohost <0.382.0> -------- mem3_reshard starting reloading jobs
couchserver_1  | [notice] 2024-03-31T03:02:46.672122Z nonode@nohost <0.382.0> -------- mem3_reshard finished reloading jobs
couchserver_1  | [info] 2024-03-31T03:02:46.678058Z nonode@nohost <0.389.0> -------- Apache CouchDB has started. Time to relax.
couchserver_1  | 
couchserver_1  | [info] 2024-03-31T03:02:46.678114Z nonode@nohost <0.389.0> -------- Apache CouchDB has started on http://any:5984/
couchserver_1  | [info] 2024-03-31T03:02:46.678128Z nonode@nohost <0.389.0> -------- Apache CouchDB has started on https://any:6984/
couchserver_1  | [notice] 2024-03-31T03:02:46.721316Z nonode@nohost <0.476.0> -------- All system databases exist.
couchserver_1  | [notice] 2024-03-31T03:02:51.694422Z nonode@nohost <0.438.0> -------- couch_replicator_clustering : cluster stable
couchserver_1  | [notice] 2024-03-31T03:02:51.698330Z nonode@nohost <0.460.0> -------- Started replicator db changes listener <0.577.0>
couchserver_1  | [info] 2024-03-31T03:02:51.698548Z nonode@nohost <0.579.0> -------- open_result error {not_found,no_db_file} for _replicator
couchserver_1  | [notice] 2024-03-31T03:03:01.629532Z nonode@nohost <0.345.0> -------- rexi_server : cluster stable
couchserver_1  | [notice] 2024-03-31T03:03:01.629615Z nonode@nohost <0.349.0> -------- rexi_buffer : cluster stable
couchserver_1  | [error] 2024-03-31T03:03:53.646933Z nonode@nohost <0.1095.0> -------- application: mochiweb, "Accept failed error", "{error,\n    {tls_alert,\n        {certificate_unknown,\n            \"TLS server: In state wait_finished received CLIENT ALERT: Fatal - Certificate Unknown\\n\"}}}"
couchserver_1  | [error] 2024-03-31T03:03:53.646967Z nonode@nohost <0.1095.0> -------- application: mochiweb, "Accept failed error", "{error,\n    {tls_alert,\n        {certificate_unknown,\n            \"TLS server: In state wait_finished received CLIENT ALERT: Fatal - Certificate Unknown\\n\"}}}"
couchserver_1  | [error] 2024-03-31T03:03:53.646989Z nonode@nohost <0.1096.0> -------- application: mochiweb, "Accept failed error", "{error,\n    {tls_alert,\n        {certificate_unknown,\n            \"TLS server: In state wait_finished received CLIENT ALERT: Fatal - Certificate Unknown\\n\"}}}"
couchserver_1  | [error] 2024-03-31T03:03:53.647012Z nonode@nohost <0.1096.0> -------- application: mochiweb, "Accept failed error", "{error,\n    {tls_alert,\n        {certificate_unknown,\n            \"TLS server: In state wait_finished received CLIENT ALERT: Fatal - Certificate Unknown\\n\"}}}"

3 posts - 2 participants

Read full topic

Hi, I am an intern web developer.

1. I have been working on a feature that display firestore data on chart.js and that’s working fine. However, every time the firestore collection is updated, the data on the chart.js graph duplicate. At first, i found out the chart.js was creating a new instance every time the firestore is updated but i manage to prevent that. The problem is still there. I have done everything i could and nothing work. Please somebody, help if you have encountered the same issue.
2. Another issue i am facing is that i have two page that perform editing of some data, i can access the first page of editing, see the draft data and editind but once i click btn save updates to move to next page, it redirect back to first page immediately.
3. I am using google place api and then geocode to convert the street address into coordinates lat long, then i calculate the distance betwee the point a and b. After i get the distance, i then calculate an amount that has to be paid based on the distance. This process is taking about 20sec plus to compute regardless of which method i use. How can make it compute faster?

Please help

I am on ionic v7+ and angular v17+.
Looking forward to your feedback my seniors.

1 post - 1 participant

Read full topic

Hey! I’m using Ionic + Nuxt, I want to disable swipe back gesture because it fires together with a native gesture, but it doesn’t work https://youtube.com/shorts/tMUNWELsKmU?si=AnOfAkGBPP6_Z7kI

1 post - 1 participant

Read full topic