Hello,
I have a mono repo with two apps, one that contains all the configurations for native builds and one with the angular PWA app. In order to build my native app I need to build my PWA app first then copy the www folder in the other project’s www.

Project 1 → root/pyxis
Project 2 → root/Mobile

I set up my appflow.config.json like:

{
  "apps":
  [
      {
          "appId": "12345abcd",
          "root": "pyxis",
          "dependencyInstallCommand": "npm ci && cd ../Mobile && npm ci && cd ../pyxis",
          "webBuildCommand": "cd ../Mobile && npm run build:dev && cp -v -R www ../pyxis/www && cd ../pyxis"
      }
  ]
}

Everything builds properly but I still have an issue I don’t understand.
Cannot run ionic deploy manifest outside a project directory
My script brings me back the the project folder I’m targeting which is root/pyxis
The www folder in root/Mobile is copied to root/pyxis

If my understanding is good, I don’t need yet Appflow SDK since all I want to do first is to build my native app with Appflow runners. I didn’t changed anything to my two projects. Do I need an important configuration?

here is the log:

[14:22:47]: ▸ 'www/index.html' -> '../pyxis/www/index.html'
[14:22:47]: Generating app manifest...
[14:22:47]: $ ionic deploy manifest
[14:22:48]: ▸ [ERROR] Cannot run ionic deploy manifest outside a project directory.
[14:22:48]: -------------------------
[14:22:48]: --- Step: upload_logs ---
[14:22:48]: -------------------------
+------------------------------+-------------------------------------------------------------------------------------------------------------------------------------+
|                                                                            Lane Context                                                                            |
+------------------------------+-------------------------------------------------------------------------------------------------------------------------------------+
| DEFAULT_PLATFORM             | ios                                                                                                                                 |
| PLATFORM_NAME                | android                                                                                                                             |
| LANE_NAME                    | android package_build                                                                                                               |
| APPFLOW_CONFIG_INSTALL_CMD   | npm ci && cd ../Mobile && npm ci && cd ../pyxis                                                                                     |
| APPFLOW_CONFIG_WEB_BUILD_CMD | cd ../Mobile && npm run build:dev && cp -v -R www ../pyxis/www && cd ../pyxis |
| PROJECT_WEB_DIR              | www                                                                                                                                 |
| DOWNLOAD_CREDENTIAL_EXISTS   | false                                                                                                                               |
+------------------------------+-------------------------------------------------------------------------------------------------------------------------------------+
[14:22:50]: Exit status of command 'ionic deploy manifest' was 1 instead of 0.
[ERROR] Cannot run ionic deploy manifest outside a project directory.


+------+---------------------+-------------+
|             fastlane summary             |
+------+---------------------+-------------+
| Step | Action              | Time (in s) |
+------+---------------------+-------------+
| 1    | default_platform    | 0           |
| 2    | build_summary       | 0           |
| 3    | add_git_credentials | 0           |
| 4    | get_appflow_config  | 0           |
| 5    | detect_native_type  | 0           |
| 6    | dependency_install  | 485         |
| 7    | get_web_dir         | 0           |
| 8    | modify_config_xml   | 0           |
| 9    | download_credential | 0           |
| 💥   | build_pro_app       | 579         |
| 11   | upload_logs         | 2           |
+------+---------------------+-------------+

[14:22:50]: fastlane finished with errors

1 post - 1 participant

Read full topic

Im trying to realise a page with vertical swiper and I want to show at the end of all the pages an ion-infinite-scroll to allow user to load more items.

<swiper class="vertical-swiper" (slideChange)="onSlideChange()" [config]="itemVerticalSwiperConfig">
  <ng-template swiperSlide *ngFor="let exploration of explorations">
    <app-item-card [exploration]="exploration"></app-item-card>
  </ng-template>
</swiper>

<ion-infinite-scroll (ionInfinite)="loadData($event)">
  <ion-infinite-scroll-content"
    loadingSpinner="bubbles"
    loadingText="Loading more data...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

The problem is that I cannot swipe on swiper to activate ion-inifinite-scroll. I’ve already tried to put infinite-scroll as swiperSlinde inside swiper but it loads it as a new slide without calling the function loadData().
Can someone help me solve this problem ? Thank you

1 post - 1 participant

Read full topic

Hi everyone,

I’m building a PWA with Angular + Ionic. Recently, I have noticed a missing behavior: the app doesn’t scroll to the top when tapping on the iOS status bar. The documentation has pointed me to the statusTap config option (Config | Ionic Config to Change Component Properties Globally) but setting it to true didn’t give any result.

I have created a repo to replicate the problem GitHub - sneas/ionic-pwa-status-tap and here is the App URL Ionic App . You can open it in iOS Safari browser to verify the “scroll to top” isn’t working when tapping on the status bar.

It feels like I’m missing something in my configuration, but I’m not sure what. Can anyone help me resolve that? Thanks in advance.

1 post - 1 participant

Read full topic

I’m having a problem with content rendering the tab bar at the bottom of the screen. This is a project I’ve picked up from someone else recently, and I’m new to Ionic and React.

My main problem is that stuff which is in <IonContent> is cut off at the bottom of the screen, as it is hidden behind the bottom tab bar.

The tab bar is created in the main App component, which looks something like this.

App.jsx

function App() => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            {/* stuff */}
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            {/* stuff */}
          </IonTabBar>
        </IonTabs>  
      </IonReactRouter>
    </IonApp>
  );
}

And then as an example for what is being done on another page.

ExamplePage.jsx

function ExamplePage(){
  return (
    <AppHeader />
    <IonContent>  
      {/* The rest of the page content goes here */}
    </IonContent>
  );
}

Apologies if the code isn’t completely syntactically correct, but I hope it illustrates what is going on as I think I have included the core parts of each.

The AppHeader works as I would expect, so that the content renders after the header. But this is not the case for the bottom tab bar. I have tried refactoring out the tab bar into a separate component, removing it from App and then inserting that component after </IonContent> on each page. But when I do that, the whole app stops rendering and I just get a blank page.

If anyone could hazard a guess to what’s going on, or point me in the right direction that would be greatly appreciated!

1 post - 1 participant

Read full topic

The websocket is working on web but not working on android.

1 post - 1 participant

Read full topic

The ‘run android’ command kept failing on my Mac (running Big Sur) with the following error:

Running Gradle build - failed!
[capacitor] [error] The operation couldn’t be completed. Unable to locate a Java Runtime.

I struggled for a while with it so just wanted to share what fixed it for me:

• Check the SDK path in Android Studio (Android Studio > Preferences… > Build, Execution, Deployment > Build Tools > Gradle > Gradle JDK)
• Set JAVA_HOME to that path in your .zshrc or .bashrc file. For example:
  export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/Contents/Home
• Quit terminal, reopen and try running again

Hope this helps someone

1 post - 1 participant

Read full topic

Version: Ionic v6

I currently have 2 plists: development-Info.plist and production-Info.plist.

Upon running capacitor sync ios the end I receive these messages:

[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist
[capacitor] [fatal] Unable to read: /Users/.../app/ios/App/App/Info.plist

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <access origin="*" />
  
  <feature name="FileTransferBackground">
    <param name="ios-package" value="FileTransferBackground"/>
  </feature>

  <feature name="CordovaHttpPlugin">
    <param name="ios-package" value="CordovaHttpPlugin"/>
  </feature>

  <feature name="AppVersion">
    <param name="ios-package" value="AppVersion"/>
  </feature>

  <feature name="File">
    <param name="ios-package" value="CDVFile"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="FileOpener2">
    <param name="ios-package" value="FileOpener2"/>
  </feature>

  <feature name="WifiWizard2">
    <param name="ios-package" value="WifiWizard2"/>
  </feature>

  <feature name="Diagnostic">
    <param name="ios-package" value="Diagnostic"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Location">
    <param name="ios-package" value="Diagnostic_Location"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Bluetooth">
    <param name="ios-package" value="Diagnostic_Bluetooth"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Wifi">
    <param name="ios-package" value="Diagnostic_Wifi"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Camera">
    <param name="ios-package" value="Diagnostic_Camera"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Notifications">
    <param name="ios-package" value="Diagnostic_Notifications"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Microphone">
    <param name="ios-package" value="Diagnostic_Microphone"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Contacts">
    <param name="ios-package" value="Diagnostic_Contacts"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Calendar">
    <param name="ios-package" value="Diagnostic_Calendar"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Reminders">
    <param name="ios-package" value="Diagnostic_Reminders"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Diagnostic_Motion">
    <param name="ios-package" value="Diagnostic_Motion"/>
    <param name="onload" value="true"/>
  </feature>

  
</widget>

1 post - 1 participant

Read full topic

Hi all,

I want to let user download a created image to local, but if user accidentally click the wrong button “deny”, then next time, the image won’t be downloaded. To avoid this, I want to let my program ask the user every time which the the write permission is denied, then it will prompt a query to let user allow the write permission.

I tried the following code:

    let permission = await Filesystem.checkPermissions()

    if (permission.publicStorage !== "granted") {

      permission = await Filesystem.requestPermissions() // Why this doesn't work????

      if (permission.publicStorage !== "granted") {
        return
      }
    }

However, this function await Filesystem.requestPermissions() doesn’t work at all, it didn’t prompt anything…

Do you have any idea about it?

1 post - 1 participant

Read full topic

Good evening,

Unfortunately I cannot seem to find clear information about this. In short, I am wondering if the Deploy plugin with AppFlow works with PWA’s as well, or only for Android/ios deployments.

I have an Angular app built as a PWA and deployed to my server. I have configured an update service to use the Deploy plugin to request an update and then refresh the app. I just want to know if this functionality is possible before I continue to spend time working on it.

With a PWA, is it possible that I can push a new build to a named channel and the PWA will be able to receive that and redeploy itself?

Thanks for any assistance.

1 post - 1 participant

Read full topic

Hello guys, I am currently building an appliaction with a microcontroller. Long story short the MCU is an accesspoint. The IPhone connects with the MCU makes an request and waits for an response.

Strangely the MCU gets the right data from the request which I made with axios, but then I get an error message as the response.

{“message”:“Network Error”,“name”:“Error”,“stack”:“createError@capacitor://localhost/src_app_hub-overview_hub-overview_module_ts.js:830:24\nhandleError@capacitor://localhost/src_app_hub-overview_hub-overview_module_ts.js:209:25\nwrapFn@capacitor://localhost/polyfills.js:4622:48\nonInvokeTask@capacitor://localhost/vendor.js:90774:43\n@capacitor://localhost/polyfills.js:4024:61\n@capacitor://localhost/polyfills.js:4335:45\ninvokeTask@capacitor://localhost/polyfills.js:5475:24\nglobalZoneAwareCallback@capacitor://localhost/polyfills.js:5501:31”,“config”:{“transitional”:{“silentJSONParsing”:true,“forcedJSONParsing”:true,“clarifyTimeoutError”:false},“transformRequest”:[null],“transformResponse”:[null],“timeout”:0,“xsrfCookieName”:“XSRF-TOKEN”,“xsrfHeaderName”:“X-XSRF-TOKEN”,“maxContentLength”:-1,“maxBodyLength”:-1,“headers”:{“Accept”:“application/json, text/plain, /”,“Content-Type”:“application/x-www-form-urlencoded”},“method”:“post”,“url”:“http://10.10.10.1:80/hello",“responseType”:“text”,“data”:"{\r\n"ssid":“LUKAS”,\r\n"password":“DUHN”\r\n}"},"status”:null}

I cannot find anything on the internet.

Cheers and thanks

1 post - 1 participant

Read full topic

In JavaScript (and other languages) “this” refers to the context in which a method is called. I am trying to bind an event handler to an object, but I cannot even compile the code, because the compiler assumes “this” refers to the component. And since it cannot find this.whateverProperty I refer to, defined on the component class, the build fails. To me, this is a failure of the compiler, since it cannot be known what “this” will refer to at compile time.

How do I get around this?

1 post - 1 participant

Read full topic

I just updated to ionic 6. I can use the command ionic codova run android without any issue. If I add --livereload it complains about the angular version.

ionic cordova run android --livereload --consolelogs --serverlogs --ssl
> ng run app:ionic-cordova-serve --host=localhost --port=8100 --ssl --platform=android --consolelogs --consolelogs-port=53703
[ng] This version of CLI is only compatible with Angular versions ^13.0.0,

Everything should be on version 12 so I’m not sure what’s going on. Here’s my ionic info. Any help would be greatly appreciated.

ionic info

Ionic:

   Ionic CLI                     : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.10
   @angular-devkit/build-angular : 12.2.16
   @angular-devkit/schematics    : 12.2.16
   @angular/cli                  : 12.2.16
   @ionic/angular-toolkit        : 6.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   ios-deploy : 1.11.4
   ios-sim    : 8.0.2
   NodeJS     : v14.15.5 (/usr/local/bin/node)
   npm        : 6.14.11
   OS         : macOS Monterey
   Xcode      : Xcode 13.2.1 Build version 13C100

1 post - 1 participant

Read full topic

I have a problem SMS and CallNumber providers not identify my app. I call

import { SMS } from '@ionic-native/sms';
import { CallNumber} from '@awesome-cordova-plugins/call-number';

app.moduel.ts

import { SMS } from '@ionic-native/sms';
import { CallNumber} from '@awesome-cordova-plugins/call-number';

1 post - 1 participant

Read full topic

Hi all,

it is really wired, after I run my app with:
ionic capacitor run android -l --external

the app really shows the change on the page, but it is not clickable anymore!

Does anyone have the same problem like me?

Is it a bug or may be I did something wrong???

1 post - 1 participant

Read full topic

Hi,

I am implementing AppsFlyer deep links and in their documentation they have some code that should be added to AppDelegate.m (see here).

Now, I can’t seem to find that file with that syntax. I have AppDelegate.swift, but that is not it.

I anyone able to help me find it?

I am using Ionic/Angular with Capacitor 3.

1 post - 1 participant

Read full topic

Throw error A ‘return’ statement can only be used within a function body.

code :
<input type=“tel” placeholder=“Mobile No” name=“mobile” [(ngModel)]=“mobile” required
maxlength=“10” minlength=“10” pattern="^[1][0-9]*$" onkeypress=“return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57” />

Showing error in return which is in input type in ionic 6 , but code is working fine , and other version of ionic its not showing any error.

1. 1-9 ↩︎

1 post - 1 participant

Read full topic

I need a way to render URL in app page.

In android native, It is possible to render external URL with tab structure using WebView by passing URL in it.

While finding its alternative in IONIC 5,

1. There is an ionic-webview plugin is available but it has function to pass file path. Is there a way to pass URL in ionic-webview?
2. Another way I found is using In App Browser but it opens URL in full screen mode, while I need to render url within the app’s page (in ion-content not outside the page).
3. Using iframe, but it gives this error. Refused to display ‘website name’ in a frame because it set ‘X-Frame-Options’ to ‘deny’

Can anyone please let me know the way to render external URL in ionic app’s page?

1 post - 1 participant

Read full topic

Hey Team,

The local notifications in my App get lost after I’m restarting my android phone. Before the restart the local notifications work fine.

According to Git Hub change log, this problem got solved already in version 2.3 capacitor/CHANGELOG.md at b83aba71f6d297720fc0395347de0f48695d1153 · ionic-team/capacitor · GitHub

And I’m using version 3.4

The Problem is also described here : bug: LocalNotifications are not persisted between device reboot on Android · Issue #2830 · ionic-team/capacitor · GitHub

Am I missing something here to make it work ?

Not sure if that is helpful, but here are the dependencies used:
“dependencies”: {

"@capacitor/android": "3.3.3",
"@capacitor/app": "1.0.6",
"@capacitor/core": "3.4.0",
"@capacitor/haptics": "1.1.3",
"@capacitor/ios": "3.3.3",
"@capacitor/keyboard": "1.1.3",
"@capacitor/local-notifications": "^1.0.9",
"@capacitor/status-bar": "1.0.6",
"@ionic/storage": "^3.0.6",
"@ionic/vue": "^5.4.0",
"@ionic/vue-router": "^5.4.0",

Thanks a lot for your reply

Stefam

1 post - 1 participant

Read full topic

I am trying to dynamically change the Column size

<ion-col [size]="this.size" [size-xl]="this.size_xl" [size-md]="this.size_md" [size-sm]="this.size_sm" [size-xs]="this.size_xs">

but this error appears
NG0303: Can’t bind to ‘size-xl’ since it isn’t a known property of ‘ion-col’.

NOTE
its just working on [size]=“this.size”

1 post - 1 participant

Read full topic

Hello, I get this error in my project when trying to use ‘ion-popover’ or ‘ion-modal’ with ionic 5:
Error: src/app/help/help.page.html:22:3 - error NG8001: 'ion-modal' is not a known element...

All other ionic components work properly

Some solutions I tried, none helped:

• I tried creating a new page and using the elements in it, still get the same error.
• I checked that I have imports: [CommonModule, IonicModule] in the module files.
• Updated to the latest @ionic-angular 5 version
• Ran npm install
• Made sure that all pages have a route
• Restarted ionic serve
• Tried ion-select with interface=“popover”, still opens as alert

This is my ionic environment:

Ionic CLI                     : 6.17.1 (C:\Users\gelet\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework               : @ionic/angular 5.9.3
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics    : 12.1.4
@angular/cli                  : 12.1.4
@ionic/angular-toolkit        : 4.0.0

Thanks

1 post - 1 participant

Read full topic