SO I am reading through the docs and I see that there are suggestions on what NOT to do when using nonlinear routing /tabs routing, but there are no examples of what to do and how to handle navigation when implementing nonlinear routing. I have questions on the actual act of navigation. EG: If I don’t just want a user to immediately route from an href, say if they are not authenticated in the app what are best practices? Do I need to create a store of app navigations and check against them or is there a way to access the routing via the vue-router. Any additional info on the topic would be great. Thanks!

4 posts - 2 participants

Read full topic

Hello,

I am using ionic to create a website. I am using a lot of ionic components, especially buttons.

When you use a button you use the click event, consequently, I suppose, the crawler (Google) doesn’t see the link.

What is the correct method to improve the crawling ?

ps : I am not talking about ssr with is something else and seems to be useless with Google.

1 post - 1 participant

Read full topic

Hello community,

I hope this message finds you well. I am currently working on a project using Capacitor/Cordova for an Android app. I have encountered a challenge related to handling push notifications when the app is completely closed.

Specifically, I am looking for guidance on running tasks in response to receiving push notifications, especially when the app is closed. I want to extract data from the push notification and perform certain actions, such as storing the data.

I have explored the documentation for Capacitor/Cordova and have implemented basic push notification handling, but I am unsure about the best practices or methods for handling these notifications in the background when the app is closed.

If anyone in the community has experience with this or can provide insights, I would greatly appreciate your assistance. Feel free to share any code snippets, relevant documentation, or tips that might help me overcome this challenge.

Thank you in advance for your time and support.

Best regards

1 post - 1 participant

Read full topic

Hey all! I am testing out my frontend in prod environment, but it is just not working. Here is what it is supposed to look like (ionic serve):

And this is after running ionic build with different configs, web and PWA behind nginx:

Routes seem correct, router-outlet content seems to be incomplete and behind ion-page-invisible CSS class, and otherwise all files are loaded correctly.

Has anyone encountered anything like that? Can somebody nudge me into the right direction? I have no idea where else to look for errors. Thanks

1 post - 1 participant

Read full topic

I want to Send SMS From Capacitor App without opening native app. The requirement is to send sms on some frequent events so user don’t need to click on native sms app button to send every time. Please help on this

1 post - 1 participant

Read full topic

I have installed a node version of 14.20.0. When I try to create a new app with ionic start I am getting a error of " ERR: Your Node.js version is v14.20.0. Node.js 14 reached end-of-life on 2023-04-30 and is no longer supported. Please update to the latest Node LTS version. " But I have a exixting ionic project of version 6 and with node version of 14.20.0. So without updating the node can I create a ionic 6 app?

1 post - 1 participant

Read full topic

—padding-start seems not working in ion-textarea. (padding top and bottom still working)
I am using ionic 7.

<ion-textarea dir="ltr" mode="ios" [rows]="1" [autoGrow]="true" [autofocus]="true" value="Enter Message" class="message-input"></ion-textarea>

.message-input {
    --background: var(--ion-color-light);
    --border-radius: 10px;
    --padding-start: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}

1 post - 1 participant

Read full topic

Following is the configuration of the app after upgrading.

Error-

I am facing this issue after upgrading. The app’s code gets compiled with a few warnings, but after opening it in the browser, it just shows a blank white screen. Nothing moves further.

The console shows the following error.

I am new to the framework and not sure what is wrong. Here is my pacakge.json

{
  "name": "vsquaredapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve  --port 8000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-builders/dev-server": "^7.3.1",
    "@angular/common": "^14.3.0",
    "@angular/compiler": "^14.3.0",
    "@angular/core": "^14.3.0",
    "@angular/forms": "^14.3.0",
    "@angular/platform-browser": "^14.3.0",
    "@angular/platform-browser-dynamic": "^14.3.0",
    "@angular/router": "^14.3.0",
    "@ionic-native/app-preferences": "^5.36.0",
    "@ionic-native/background-fetch": "^5.36.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/core": "^5.36.00",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/geolocation": "^5.36.0",
    "@ionic-native/http": "^5.36.0",
    "@ionic-native/keyboard": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/photo-viewer": "^5.36.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic/angular": "^4.0.0",
    "@ionic/cordova-builders": "^10.0.0",
    "async-lock": "^1.4.0",
    "chart.js": "^2.9.1",
    "com-sarriaroman-photoviewer": "^1.3.0",
    "cordova-browser": "7.0.0",
    "cordova-plugin-advanced-http": "^3.3.1",
    "cordova-plugin-camera": "~6.0.0",
    "cordova-plugin-device": "^2.1.0",
    "cordova-plugin-file": "^8.0.1",
    "cordova-plugin-geolocation": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.1",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-splashscreen": "^6.0.2",
    "cordova-plugin-statusbar": "^4.0.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-wkwebview-inputfocusfix": "^1.0.4",
    "cordova-sqlite-storage": "6.1.0",
    "core-js": "^3.33.3",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "rxjs": "~6.6.7",
    "simple-pdf-viewer": "^2.0.3",
    "sql.js": "^1.9.0",
    "tslib": "^2.0.0",
    "typeorm": "^0.3.17",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^14.0.1",
    "@angular-devkit/architect": "^0.1402.13",
    "@angular-devkit/build-angular": "^14.2.13",
    "@angular-devkit/core": "^14.2.13",
    "@angular-devkit/schematics": "^14.2.13",
    "@angular/cli": "^14.2.13",
    "@angular/compiler-cli": "^14.3.0",
    "@angular/language-service": "^14.3.0",
    "@ionic/angular-toolkit": "~2.0.0",
    "@ionic/cli-plugin-proxy": "1.5.8",
    "@ionic/lab": "2.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jsonwebtoken": "^9.0.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "cordova-ios": "^7.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.8.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-advanced-http": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-network-information": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-wkwebview-inputfocusfix": {},
      "cordova-plugin-geolocation": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

Thank you in Advance.

3 posts - 2 participants

Read full topic

hi every one :
i have issue in ionic 7 - angular - capacitor
i create a new app and just test it in android v 8.1 and i face this error
my app info

  Require stack:
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/index.js
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.1.1 (/Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.6.0
@angular-devkit/build-angular : 17.0.6
@angular-devkit/schematics : 17.0.6
@angular/cli : 17.0.6
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v18.15.0 (/Users/someone/.nvm/versions/node/v18.15.0/bin/node)
npm : 9.5.0
OS : macOS Unknown

1 post - 1 participant

Read full topic

BluetoothLE
We using Bluetooth LE and hve setup a broadcast mobile device and one mobile device that scans and connect to the broadcast device. The data is transmitting but it seems like its transmitting the data packets in parts, as each transmission is being logged twice or three times when we send data.
Is this the right behavior of the data transmission. Data packet size is below 20 bytes

Data transmitted to broadcast device searches for data on an sqlite database.

Behaviour
1st transmission gets the record but does not display the record
2nd transmission does display records but the search is logged twice or 3 times

Expected behavior
1st scan gets the records and display the record first time around

Your assistance will be much appreciated.

Ionic:

Ionic CLI : 6.20.1 (C:\Users\Tigere Bervin\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.7.5
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3

Cordova:

Cordova CLI : 11.0.0
Cordova Platforms : android 12.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 12 other plugins)

Utility:

cordova-res : 0.15.4
native-run (update available: 2.0.0) : 1.7.2

System:

Android SDK Tools : 26.1.1 (C:\Users\Tigere Bervin\AppData\Local\Android\Sdk)
NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
npm : 8.3.1
OS : Windows 10

1 post - 1 participant

Read full topic

Hello! I’ve been already struggling for a lot of time trying to solve an issue with the navigation in React. I’m using Ionic React 7.0 and Started with the tabs template.

My actual setting is:

<IonApp>
      <GameProvider roomName={roomName}>
        <IonReactRouter>
          <IonTabs>
             <IonRouterOutlet>
              <Redirect exact path="/" to="/game-settings" />
              <Route exact path="/gameSettings" component={GameSettings}>
              <Route exact path="/gameSettings/teams/:roomName" component={TeamSettings}>
              <Route exact path="/gameSettings/rules/:roomName" component={RuleSettings}>

…

Each component is exported using React.Memo([TheComponent]).

Also each one of the compoenets has the following initial structure:

<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Crear juego</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Crear juego</IonTitle>
          </IonToolbar>
        </IonHeader>

Any help? I have already researched everything I could, but no luck at all. It happens as PWA, and as webapp

1 post - 1 participant

Read full topic

The doc says we can use compareWith (ion-radio-group: Radio Button Group Usage for Ionic Apps) but seems the property not exists in ionic 7 standalone

1 post - 1 participant

Read full topic

We have built a Ionic/Vue mobile app (primarily iOS) and have been working on making it easier for users to import files into the app. We’ve been investigating using AirDrop, or the iOS “open with” sheet, to import files and have it working for one file at a time:

App.addListener('appUrlOpen',(data) => {
    if( data.url.startsWith('file://') ){
        console.log(data.url);
        // do stuff with data.url
    }
});

Does anyone know if there’s a way to capture multiple files? I’m assuming we’re overlooking something, we’ve spent a long time trying to research this but we’re not sure exactly what to search for.

Any suggestions or guidance is appreciated. Thanks!

1 post - 1 participant

Read full topic

I need to change a tabs whenever a certain thing happen in my page. So it needs to change to another tab even if the user didn’t click the tab icon. How can i do that?

1 post - 1 participant

Read full topic

Originally published at: Unleashing the Power of Ionic’s Superapp SDK: A Closer Look at Ionic's Supernova Superapp - Ionic Blog

In this blog post, we will explore the features and capabilities of Supernova and delve into the magic that makes it all possible.

1 post - 1 participant

Read full topic

Hello,
I have been trying to compile with the capacitor splash screen in Angular and no matter what I do i get the following errors.

I am hoping someone can tell me what is going on.

Error: src/app/app.component.ts:21:13 - error NG2003: No suitable injection token for parameter ‘splashScreen’ of class ‘AppComponent’.

• Consider using the @Inject decorator to specify an injection token.*
• 21 private splashScreen: SplashScreen*

•                             ~~~~~~~~~~~~*
  

• This type does not have a value, so it cannot be used as injection token.*

This is my code …

import { SplashScreen } from ‘@capacitor/splash-screen’;
.
.
.
export class AppComponent {
constructor(
private platform: Platform,
private authService: AuthService,
private router: Router,
private splashScreen: SplashScreen
) {
this.splashScreen.show();
this.initializeApp();
}

These are my dependencies …

My dependencies are:
“dependencies”: {
“@angular/animations”: “^16.0.0”,
“@angular/cdk”: “^15.2.9”,
“@angular/common”: “^16.0.0”,
“@angular/compiler”: “^16.0.0”,
“@angular/core”: “^16.0.0”,
“@angular/forms”: “^16.0.0”,
“@angular/platform-browser”: “^16.0.0”,
“@angular/platform-browser-dynamic”: “^16.0.0”,
“@angular/router”: “^16.0.0”,
“@capacitor/android”: “5.5.1”,
“@capacitor/app”: “5.0.6”,
“@capacitor/core”: “^5.5.1”,
“@capacitor/google-maps”: “^5.3.3”,
“@capacitor/haptics”: “5.0.6”,
“@capacitor/keyboard”: “5.0.6”,
“@capacitor/splash-screen”: “^5.0.6”,
“@capacitor/status-bar”: “^5.0.6”,
“@ionic/angular”: “^7.5.4”,
“ionicons”: “^7.2.1”,
“rxjs”: “~7.8.0”,
“tslib”: “^2.3.0”,
“zone.js”: "~0.13

1 post - 1 participant

Read full topic

Hi,
I updated my project from angular 16 to 17. Now the build command ends with an error:

> ionic build          
> ng.cmd run app:build
Error: Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(ngswConfigPath).
[ERROR] An error occurred while running subprocess ng.
        
        ng.cmd run app:build exited with exit code 1.

In the file angular.json there are two lines

BUT when I create a new blank project and add pwa service worker again, it adds the exact same properties into the angular.json file without showing any errrors! How to fix this?

What I tried so far:

1. Delete the node_modules folder.
2. Delete the package-lock.json.
3. Clean the npm cache with: npm cache clean --force
4. npm install

Another question is: can I copy all differences from angular.json file of the new blank project to the angular.json file of my current poject? e.g.:

found in new angular.json

  "builder": "@angular-devkit/build-angular:browser",

  or 

  "main": "src/main.ts",

found in old angular.json

  "builder": "@angular-devkit/build-angular:application",

  or 

  "browser": "src/main.ts"

1 post - 1 participant

Read full topic

I have a plugin that uses a 3rd party SDK written in objective-c. The file structure for the Library looks like this:

• Library fodler

  • libraryfile.a

  • include folder

  * another folder
  
      * .h files
  

I’ve added a bridging header with [PluginName]-Bridging-Header.h that imports all the header files to my plugin.
I’ve added a Framework and Library dependency for the libraryfile.a in General
I’ve added the proper path to my bridging header to the Objective-C Bridging Header setting
I’ve updated my library search path to include the path to the Library folder

When I go to build my app in Xcode, I get undefined symbols err: _OBJC_CLASS_$_className from the main plugin file where I am attempting to use the class. I’ve poked around online and cannot find anything relevant to this error when its a coming from a static library? Has anyone ran into something like this before?

1 post - 1 participant

Read full topic

I am using ionic v7.1.1 and there is a default behaviour, if someone is in dark mode in their system then he will see my website in dark mode and if someone is in light mode in their system then he will see my website in light mode.
I know i can do it by writting some extra css with ( .dark / .light )classes but i don’t want to do some much work.
see the website is changing its theme automatically when user switch their system’s theme.

I just want ionic to not switch theme automatically unless someone tap on toggle button.

1 post - 1 participant

Read full topic

Hi there,

I want to know if its possible in typescript to programmatically detect if an android device is using gestures or buttons for navigation. I’m having trouble with the layout of my app. On android devices that have gesture navigation enabled (& no gesture guide bar) the app doesn’t stretch all the way across the device but contains a gap at the top (about 5-10% of the screen), however if the gesture guide bar is enabled or button navigation is used everything works as expected.

Any help is appreciated! Thanks.

1 post - 1 participant

Read full topic