I’m trying to generate the App Icon and Splash Screen for my Ionic Angular app. In the past I did it simply by using:

cordova-res ios --skip-config --copy
(following this guide)

However I now get the following error:

/usr/local/lib/node_modules/cordova-res/node_modules/sharp/lib/sharp.js:30
  throw new Error(help.join('\n'));
  ^

Error: 
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-darwin-x64.node'
Require stack:
- /usr/local/lib/node_modules/cordova-res/node_modules/sharp/lib/sharp.js
- /usr/local/lib/node_modules/cordova-res/node_modules/sharp/lib/constructor.js
- /usr/local/lib/node_modules/cordova-res/node_modules/sharp/lib/index.js
- /usr/local/lib/node_modules/cordova-res/dist/image.js
- /usr/local/lib/node_modules/cordova-res/dist/cli.js
- /usr/local/lib/node_modules/cordova-res/dist/index.js
- /usr/local/lib/node_modules/cordova-res/bin/cordova-res

Possible solutions:
- Install with the --verbose flag and look for errors: "npm install --ignore-scripts=false --verbose sharp"
- Install for the current runtime: "npm install --platform=darwin --arch=x64 sharp"
- Consult the installation documentation: https://sharp.pixelplumbing.com/install
    at Object.<anonymous> (/usr/local/lib/node_modules/cordova-res/node_modules/sharp/lib/sharp.js:30:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/cordova-res/node_modules/sharp/lib/constructor.js:8:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

I already tried fixing it using some advices from this GitHub issue:
Removing cordova-res from the project using npm uninstall cordova-res and install it globally again using npm install -g cordova-res.

That didn’t work, same error again.
I’m using the latest cordova-res@0.15.4.

More about my setup:

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.2
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.4
   @capacitor/android : 3.3.4
   @capacitor/core    : 3.3.4
   @capacitor/ios     : 3.3.4

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v14.15.4 (/usr/local/bin/node)
   npm    : 6.14.10
   OS     : macOS Big Sur

I ran out of ideas on how to fix this.
Thank you in advance for any help!

1 post - 1 participant

Read full topic

I am tring to serve my Ionic app on an Android emulator. However, each time I do it comes up with the following error:

AAPT: error: unexpected element found in .

The provider indicated is this:

As you can see, this provider tag is related to Video Capture Plus. I’ve had problems with it in the past, for one being that it couldn’t be downloaded Video capture plus download returns 404 error.

However, something in the way that I set up Video Capture Plus before I knew it couldn’t be used made it so the app thinks it needs it. I searched the project and file system for all instances of videocaptureplus and deleted a lot of things. However, when I run “ionic cordova run android -l”, it still populates the Android Manifest with the provider tag.

Any ideas of what else I need to get rid of in order to run my app?

I can post the rest of the error stack as needed.

1 post - 1 participant

Read full topic

I’ve been building an app in Ionic, mainly just a proof of concept. I’ve been mostly developing locally in the browser but decided to do a test build to an android emulator (api 30) to see how it looks.

I’ve noticed some quite odd but annoying differences in the look of the app, I’m really struggling to find what is causing this since everything I find is from 5+ years ago and relates to an old web view being used, which shouldn’t be the case here. It’s a few day old Ionic app so is running V6 and Capacitor, no additional plugins installed other than the default.

I’ll attach some screenshots below, but the differences I’m noticing are:

• ion-input is completely unstyled on android. I have overridden a background colour via the CSS variables but even the label / help text is completely wrong
• Some CSS is just not being applied. For example I have some utility classes such as gap-3 which are seen inside the devtools but doesn’t get applied.

Anyone have any ideas? Ripping my hair out as it’s really odd and I’m struggling to find anyone else experiencing something similar.

I have also run the app inside the browser on the device via a live reload and it looks fine.

On the left is one of the pages in a browser, notice the spacing between the cards that’s using the CSS gap property:

On the right is the same page but running inside an android emulator on the latest (I think) API version, 30. Here the spacing has gone but as you can see by the dev tools screenshot overlay on the right the devtools are showing as it being applied.

This is the more interesting one since I’m completely losing ion-input, ion-item and ion-label styles here. On the left is the screenshot from the app in the browser, with everything styled as I would expect.

On the right is it running inside the same emulator, with most of the ion-item and input styles being lost. However, as with the previous gap issue, the styles are being applied. The devtools screenshot shows the background CSS variable which has been converted from an RGBA format to HSL. Even if I edit this in dev tools to black, I don’t see anything

1 post - 1 participant

Read full topic

(topic deleted by author)

1 post - 1 participant

Read full topic

Hello,

I noticed that a click on a simple file input <input type=“file” #upload /> to pick a file allows the opening of this menu (on iOS):

To my surprise the options “Photo Library” and “Choose Files” works perfectly without additional plugins:

• Photo Library allows me to select one or more photos in my gallery, to choose the size (real or compressed). And when my selection is done, my input change event got a javascript object File.
• Choose Files allows me to select one file from the iOS File app, and it also works perfectly.

At this stage, Take Photo or Video crashes my app because I didn’t install the Camera plugin and/or set the NS Privacy strings in the PLIST file.

My question is: So without a plugin it’s possible to do this, is there a way to use the exact same function/behavior from another button for example?

Because I installed the @capacitor/camera and cordova-plugin-chooser plugins (using the camera works perfectly) but:

• The result is a dataURI that I have to convert to Blob then to File (I need to display a file preview and upload them) - it takes time while with the selection via the input the display is instantaneous
• I don’t have the possibility to choose the real or compressed size when I select photos from my gallery with this plugin
• Some files aren’t managed by the cordova-plugin-chooser plugin while with the “Choose Files” option I have no problem and the selection of any file works

I hope my explanation and my request is clear to understand.

Thanks!

I’m using Ionic V6 (but I remember the same behavior on the previous version 5).

1 post - 1 participant

Read full topic

Hello

I am building a chat functionality in my app. Everything works fine, i just need some help with the styling. I am using a grid for the chat, each message being a row. Depending on if you are the sender or receiver of the message, it has to have a different layout.
This is done with a ternary operator

eg: ${message.userid == userId ? styles.sender : styles.receiver}

As you can see in my screenshot, all rows/collumns are the same length. I want it to change length depending on the message.
Is there any way the column size can be adjusted dynamically using this grid format?

A second, less important, question. The

tag for message.text has 2 classes ‘text’ and ‘sender’ or ‘receiver’. The stuff i place in ‘text’ never works (shared stuff between sender and receiver was placed in text but i never got it work using regular css class selectors)

Message Component:

interface MessageProps {
    message: MessageModel;
}

const Message: React.FC<MessageProps> = ({ message}) => {
    const { userId } = useAuth();

    return (
        <IonRow class={"ion-no-margin ion-no-padding"} >
            <IonCol offset={`${message.userid == userId ? 3 : 0}`} size="9" className="ion-no-margin ion-no-padding">
                {message.userid != userId ?  <p className={styles.username} >{message.username}</p> : <div />}
                <p className={`text ${message.userid == userId ? styles.sender : styles.receiver}`}>{message.text}</p>
            </IonCol>
        </IonRow>
    );
};

export default Message;

styles for message component:

.username {
    font-size: 80%;
}


p.sender {
    background-color: var(--ion-color-tertiary);
    color: #fff;
    white-space: pre-wrap;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
}

p.receiver {
    background-color: var(--ion-color-secondary);
    text-align: left;
    color: #fff;
    white-space: pre-wrap;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
}

Message component being used in chat view:

                <IonGrid>
                    {messages.length == 0 ?
                        <h2 className="ion-margin ">Er zijn nog geen berichten verstuurd over dit recept.</h2>
                        :
                        messages.map((message, index) =>
                            <Message message={message} key={index} />
                    )}
                </IonGrid>

How it looks:

4 posts - 2 participants

Read full topic

Hi all,
I have install cordova social sharing plugin inside Capacitor 3 project and want to share image from server to whatsapp directly. I am using shareViaWhatsapp method but it throw error. Please help.

      this.socialSharing.shareViaWhatsApp('hello',this.sharingImage,this.sharingUrl).then((res)=>{

      }).catch((err)=>{
        console.log('err in as',err);
        
      })```

sharingImage is url of image
sharingUrl is other url

1 post - 1 participant

Read full topic

I found that stencil-router has root param similar to basename(Is there anything similar to the basename of React Router? · Issue #26 · ionic-team/stencil-router · GitHub), but i wonder is there anything similar to the basename of React Router in ionic v1?
I find some keywords such as serverBase、baseHref、hashPrefix in ionic.bundle.js but they didn’t work

1 post - 1 participant

Read full topic

When entering an ion-input, the Android Keyboard pops up. Clicking on the gear symbold opens the Android Keyboard settings. Under “text correction” the enabled setting “Auto-capitalization” is not working. The keyboar shows every letter in lower case even after a finished sentence.

A workaround could be using the " autocapitalize" attribute. But I would need a way to apply that attribute to every ion-input. Not one by one. The preferred solution is to follow the keyboard settings!

Tested on Android 10

"@ionic-native/core": "^5.22.0",
"@ionic-native/screen-orientation": "^5.22.0",
"@ionic/angular": "5.5.3",
"@capacitor/android": "^2.4.6",
"@capacitor/core": "2.4.6",
"@capacitor/ios": "^2.4.6",
"cordova-android": "9.0.0",
"cordova-browser": "5.0.4",
"cordova-ios": "5.1.0",

1 post - 1 participant

Read full topic

On iOS It is working fine.

iOS File Path : /Users/vishnu/Library/Developer/CoreSimulator/Devices/394BD2FF-A2EF-4C51-A82A-1C57F6967ECD/data/Containers/Bundle/Application/6AD9DCB6-3A96-44E1-A99D-B4092B472A1A/App.app/public/assets/myApp/2.png

IOS LOG

⚡️  [log] - iOS File Path : /Users/vishnu/Library/Developer/CoreSimulator/Devices/394BD2FF-A2EF-4C51-A82A-1C57F6967ECD/data/Containers/Bundle/Application/6AD9DCB6-3A96-44E1-A99D-B4092B472A1A/App.app/public/assets/myApp/2.png
**⚡️ [log] - path = /**

**⚡️ [log] - Path / | TODO Serve Index.html**

**[DEBUG] Connection sent 122 bytes on socket 8**

**[DEBUG] Did close connection on socket 8**

**[VERBOSE] [::1:3005] ::1:55581 200 "GET /" (724 | 122)**

**[DEBUG] Did open connection on socket 8**

**[DEBUG] Connection received 650 bytes on socket 8**

**[DEBUG] Connection on socket 8 preflighting request "GET /favicon.ico" with 650 bytes body**

**[DEBUG] Connection on socket 8 processing request "GET /favicon.ico" with 650 bytes body**

**To Native Cordova -> Webserver sendResponse Webserver533376988 ["options": [EEB26703-18B8-49CC-858A-CA397C72414F, {**

**headers = {**

**};**

**path = "android_asset/public/assets/myApp/2.png";**

**status = 200;**

**}]]**

Android shows error

“android_asset/public/assets/myApp/2.png: open failed: ENOENT (No such file or directory)”

Android File Path : /android_asset/public/assets/myApp/2.png

2022-01-19 16:35:24.891 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 140 - Msg: Android File Path : /android_asset/public/assets/myApp/2.png
2022-01-19 16:35:30.454 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: New request is incoming!
2022-01-19 16:35:30.461 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 122 - Msg:  path = /
2022-01-19 16:35:30.461 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 124 - Msg: Path / | TODO Serve Index.html
2022-01-19 16:35:30.462 28342-28432/io.ionic.starter D/org.apache.cordova.plugin.Webserver: Got sendResponse: ["c07e575c-ea03-431e-b685-2988c84205cf",{"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}]
2022-01-19 16:35:30.493 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: responseObject: {"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}
2022-01-19 16:35:30.637 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: New request is incoming!
2022-01-19 16:35:30.639 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 122 - Msg:  path = /favicon.ico
2022-01-19 16:35:30.639 28342-28432/io.ionic.starter D/org.apache.cordova.plugin.Webserver: Got sendResponse: ["2ac8f737-d914-450f-9598-a4b51253af5e",{"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}]
2022-01-19 16:35:30.675 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: responseObject: {"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}

Here is my code

import { Component } from '@angular/core';
import { WebServer } from '@awesome-cordova-plugins/web-server/ngx';
import { File } from '@awesome-cordova-plugins/file/ngx';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private webServer: WebServer,private file: File, private platform: Platform) { 

  var port = 3005;
  
  var myRoot;

  if(platform.is("android")){myRoot=this.file.applicationDirectory+"public/assets/myApp/2.png";}
  
  
  if(platform.is("ios")){ myRoot=file.applicationDirectory+"public/assets/myApp/2.png"; }
  
  var myRootPath = myRoot.substring(7, myRoot.length)

  this.webServer.onRequest().subscribe(data => {
    console.log(" path = " + data.path);
    if(data.path === "/"){
      console.log("Path / | TODO Serve Index.html")
    }
    const res: any = {
      status: 200,
      path: "android_asset/public/assets/myApp/2.png", //Testing Static Flile Serving
      headers: {
         
      }
    };

    this.webServer.sendResponse(data.requestId,res)
      .catch((error: any) => console.error(error));
  });

 
  this.webServer.start(port)
  .catch((error: any) => console.error(error));

  console.log('server started at port : ', port);
 

  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {

  if(platform.is("android")){  
    console.log("Android File Path : " + myRootPath)
  }
  if(platform.is("ios")){  
    console.log("iOS File Path : " + myRootPath)
 }
}
}
}

How to fix this issue?

1 post - 1 participant

Read full topic

so i installed this plugin and i get this error Error: The target entry-point "@awesome-cordova-plugins/social-sharing" has missing dependencies: [ng] - @awesome-cordova-plugins/core

2 posts - 1 participant

Read full topic

(topic deleted by author)

1 post - 1 participant

Read full topic

I’ve had a terrible time getting Firebase Analytics working in iOS, but I finally managed to get it to work on my Ionic v6 Angular App. I’m sure there are other people having these same issues so I’m going to explain the various issues I encountered and how I addressed them.

There are multiple modules that implement Firebase Analytics from the Ionic Community plugins. The main ones are Analytics-Firebase and Firebase-Analytics.

These two modules correspond to cordova-plugin-analytics and cordova-plugin-firebase-analytics. I tried both and could not get past running Capacitor sync with either one in a fresh Ionic Angular project that only had the standard Capacitor starter packages plus one of these two Firebase Analytics packages.

NOTE: When there is a dash in the name of Firebase-Analytics and Analytics-Firebase I’m referring to the module of that name and not to the name of the “Firebase Analytics” service itself. Yeah, this is horrible naming.

When pod install is run, you will see this error:

The ‘Pods-App’ target has transitive dependencies that include statically linked binaries: (/ios/App/Pods/FirebaseAnalytics/Frameworks/FirebaseAnalytics.xcframework)

To get around this, you need to edit the Podfile in the ios/App folder that is generated when you added ios as a Capacitor platform.

In that Podfile, change use_frameworks! to this:

use_frameworks! :linkage => :static

If you see the following error when you build your project in XCode there may be one more step.

Command CompileSwiftSources failed with a nonzero exit code

If you see this, also add this to your Podfile where it says # Add your Pods here

pod ‘Firebase/Analytics’

After this run:

ionic build
ionic cap sync

Then build your project in XCode. The build should complete if you’re using Firebase-Analytics. If you’re using Analytics-Firebase, there will be additional errors to resolve. You may find the following solutions helpful in this case.

https://github.com/appfeel/analytics-google/issues/21#issuecomment-530480604
https://github.com/apache/cordova-plugin-file-transfer/issues/258
https://stackoverflow.com/questions/63168114/firebase-analytics-setscreenname-deprecated

If the build completes, but Firebase Analytics still isn’t working or your app crashes immediately after loading, check your error messages. If you see something about it not being able to find GoogleService-Info.plist, see this solution:
https://stackoverflow.com/questions/45317777/could-not-find-a-valid-googleservice-info-plist-in-your-project

1 post - 1 participant

Read full topic

I am using VSCode to for most of my Ionic/Angular projects, as are my colleagues, and I would like for each of us to follow the same code/indention styles per project. Is there a spot in our linting configs or project configs that I can set the indent is 4 spaces instead of the default 2, so we are all coding the same way?

1 post - 1 participant

Read full topic

Hello all.
I’m developing an app with Ionic v6 + Angular in which a user invites his friends to install my app from the app store (Google Play / Apple Store).
The person inviting will enter the phone number of the invited friend, and I need to identify this phone number in the app after it was installed by the invited friend (so that I can link the two persons in my FireBase DB).
I would appreciate some guidance on how to pass over this parameter (phone number) to the receiving device and to be able to read it once the application is installed and run for the first time.

I thought of adding the phone number as a URL string parameter that will be opened in the device’s browser, and there will be a button to install the app (action to the app’s installation link in the App Store). However, I still need some sort of a shared storage accessible by both the browser and the app so they can write/read this data.
What are my options here?
Thanks!

1 post - 1 participant

Read full topic

I need to reopen modal after dismiss but I don’t want recreate it. I need to reopen created modal before…

steps:

1. create modal
2. dismiss modal
3. reopen modal

What is the best practices?

If I use present method, the modal will be recreated each time.

Please help me

1 post - 1 participant

Read full topic

I have temporarily enabled the https protocol on my cloud server using self signed certificate.

unfortunately this solution doesn’t work. when i build to device, the communication doesn’t work.

how can i solve?

3 posts - 2 participants

Read full topic

Using Ionic 6.0.1, I am trying to have an ion-item that contains both a disabled input and an enabled ion-button. However, adding the disabled flag to the input causes the button to be disabled (although its color remains as if enabled). (Removing disabled from the input, or replacing it with readonly makes the button work again.)

Here is the initial code where I discovered this effect:

      <ion-item>
        <ion-label position="floating">Email pending verification</ion-label>
        <ion-input [value]="user.email_to_be_verified" disabled></ion-input>
        <ion-button slot="end" (click)="saveAccount(true)">
          Cancel
        </ion-button>
      </ion-item>

Here is a refactor I tried, but the behavior was the same:

      <ion-item>
        <div style="display: flex; justify-content: space-between; width: 100%;">
          <div>
            <ion-label position="floating">Email pending verification</ion-label>
            <ion-input [value]="user.email_to_be_verified" disabled></ion-input>
          </div>
          <ion-button color="warning" (click)="saveAccount(true)" [disabled]="false">
            Cancel
          </ion-button>
        </div>
      </ion-item>

1 post - 1 participant

Read full topic

I am trying to build ios with the ionic framework and I get this error: “Building for iOS, but the embedded framework ‘Sentry.framework’ was built for iOS + iOS Simulator”

I am able to bypass this in XCode GUI by setting Validate Workspace, but it doesn’t work when using the Ionic Framework. Does anyone know if Sentry is no longer compatible with the Ionic Framework build process?

1 post - 1 participant

Read full topic

Hello, I want to develop an application for iOS and Android at the same time using Ionic and a local database such as sqlite, but I don’t know exactly what to use, React, Vue or Angular. Any ideas/tips?

Thanks

3 posts - 3 participants

Read full topic