Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 230447 articles
Browse latest View live

Ionic elements not showing on built version of app

$
0
0

Hello!

I am working on a small personal project and have run into a bit of an issue. When I build my app and host it locally with http-server none of the Ionic components show, although they are present in my browsers DOM with a 0px height. What makes it confusing to me is that when I had been testing using Ionic serve everything had been showing up as expected and there were no errors present in the developer console.

Going off other forum posts it seems like the issue might be in the angular.json file so I have attached that below

Any pointers on where this issue could be coming from would be appreciated

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {
        "@ionic/angular-toolkit:page": {
          "styleext": "scss",
          "standalone": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "www",
              "browser": ""
            },
            "index": "src/index.html",
            "polyfills": [
              "src/polyfills.ts"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
            ],
            "styles": ["src/styles.scss", "src/theme/variables.scss",
  "node_modules/@ionic/angular/css/core.css",
  "node_modules/@ionic/angular/css/normalize.css",
  "node_modules/@ionic/angular/css/structure.css",
  "node_modules/@ionic/angular/css/typography.css",
  "node_modules/@ionic/angular/css/padding.css",
  "node_modules/@ionic/angular/css/float-elements.css",
  "node_modules/@ionic/angular/css/text-alignment.css",
  "node_modules/@ionic/angular/css/text-transformation.css",
  "node_modules/@ionic/angular/css/flex-utils.css",
  "node_modules/@ionic/angular/css/display.css"],
            "scripts": [],
            "browser": "src/main.ts"
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "ci": {
              "progress": false
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "app:build:production"
            },
            "development": {
              "buildTarget": "app:build:development"
            },
            "ci": {
              "progress": false
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
            ],
            "styles": ["src/global.scss", "src/theme/variables.scss"],
            "scripts": []
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@ionic/angular-toolkit"
    ],
    "analytics": false
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    },
    "@angular-eslint/schematics:application": {
      "setParserOptionsProject": true
    },
    "@angular-eslint/schematics:library": {
      "setParserOptionsProject": true
    }
  }
}

Web Server Cache Issue with Ionic App

$
0
0

Hi All,

In addition to placing my Ionic app on the App Store, I am also hosting it on a web server. However, I am unsure whether the issue I’m experiencing is related to the web server or if something can be done in Ionic to expedite loading on the web server.

One issue I noticed is that when I upload the www folder to the web server, I need to clear my PC cache and internet files every time; otherwise, the updated app does not appear, and the previous version is still loaded.

I believe this is related to caching, either on the server or in the browser. If it’s a browser issue, we can’t expect all users to clear their cache manually every time we make an update. It seems that the browser does not recognize the changes.

Is there something we can do, such as adding a tag to each page, to ensure that browsers acknowledge updates and always download the latest version?

Looking forward to your suggestions.

Web Server Cache Issue with Ionic App

$
0
0

What you are using to build your app? If you are using Vite, it adds a hash to the filenames so the cache gets busted on new builds. The only file that the browser would cache would be the index.html which you could configure the cache TTL on your server or set index.html to never cache like Cache-Control: no-store.

You could also implement something that alerts the user they are running an older version and need to refresh to load the most recent.

Web Server Cache Issue with Ionic App

$
0
0

I am just using Ionic Build. Is there other ways to prepare of a we server.

Also to inform users would not be idle to ask them to keep clearing the cache.

I would prefer if we could do it automatically

Ionic camera with overlays - camera view is black

$
0
0

Did you make it work with ios or android?

IOS - ITMS-91061: Missing privacy manifest

$
0
0

Did you get it working with v10.13.0?
I’m still using v8.2.5 is there a way to add the privacy manifests manually for older versions?

I have been caught out by this and have limited time to resolve and I have 11 SDKs that need this resolved.

Handling Privacy Manifest Requirements with Outdated Firebase and Angular Version

$
0
0

Hi,

I’ve been caught off guard by the new privacy manifest requirements, which are asking for 11 declarations—mostly related to Firebase.

Unfortunately, my app is somewhat outdated, as I haven’t had time to update all the dependencies. I’m currently using:

  • Ionic 5
  • Capacitor 5.0.0
  • Angular 12
  • Firebase 8.2.5
  • AngularFire 6.1.5

I see two possible options:

  1. Upgrade to Firebase 10.22.0, which includes the privacy manifest. However, this would also require upgrading to AngularFire 16.0.0 and Angular 16, introducing a large number of breaking changes that could be difficult to manage. There are also several other SDKs it mentions.
  2. Manually create a privacy manifest or use a tool to generate one. Would it be possible to copy the Firebase 10.22.0 manifest contents into my own manually created file?

I’m on a tight deadline and have very limited time to resolve this. Any advice would be greatly appreciated!

SDKS listed by App Store

Frameworks/Capacitor.framework/Capacitor
Frameworks/Cordova.framework/Cordova
Frameworks/FBLPromises.framework/FBLPromises
Frameworks/FirebaseCore.framework/FirebaseCore
Frameworks/FirebaseCoreDiagnostics.framework/FirebaseCoreDiagnostics
Frameworks/FirebaseDynamicLinks.framework/FirebaseDynamicLinks
Frameworks/FirebaseInstallations.framework/FirebaseInstallations
Frameworks/FirebaseMessaging.framework/FirebaseMessaging
Frameworks/GoogleDataTransport.framework/GoogleDataTransport
Frameworks/GoogleUtilities.framework/GoogleUtilities
Frameworks/nanopb.framework/nanopb

Cheers,

App slow on second launch

$
0
0

Hello, our app is performing perfectly on the first launch.

But when we exit the app and launch again, it is extremely slow, UI renders very slowly, all pages/components when navigating to for the first time is extremely slow but gets normal once it is loaded.

Project is based on ionic 5 and cordova with angular9, we have tried updating to angular16, ionic6 and it does nothing to fix this. Some has said it has got to do something with webview, we have also tried their given solutions like enabling/disabling hardware/software acceleration, but no fix till now.

Note: After 1st launch and exit, if we clear all the app storage and launch again as first time, it is back to normal. Also, this issue is not there on emulator, only physical devices

Please help.


Missing Privacy manifest - Ionic React

$
0
0

Thank you for your help. That works. :+1:

Guidance on Using Capacitor Federation Plugin

$
0
0

Hi Team,

Our enterprise application is built using the Angular, Ionic, and Capacitor tech stack. We offer both web and mobile apps to our end users. We have a requirement to transition our application to a micro frontend architecture. Using Angular Module Federation, we can convert our Angular application into micro frontends:

According to the Capacitor documentation, the Capacitor Federation plugin enables mobile apps to adopt a micro frontend approach:

With the Ionic team discontinuing its enterprise offerings and no longer onboarding new customers Important Announcement: The Future of Ionic’s Commercial Products - Ionic Blog, could you please provide guidance on how we can use the Capacitor Federation plugin?

Thank you.

IOS - ITMS-91061: Missing privacy manifest

$
0
0


I’m using this, and I’ve uploaded it to the store (only for testing with TestFlight for now), and I didn’t get any errors.

However, I haven’t updated my privacy file—maybe I should.
Firebase Version 11 works fine, and I can get push notifications working.

How to pass .env variables via wireless debugging (adb)?

$
0
0

Hi. Not sure where to ask this.

So I want to be able to launch my ionic app right away on my phone - without connecting via USB - directly via Wi-Fi (Wireless Debugging).

I managed to successfully build and launch it on my phone. But now the problem is that - it does not see the .env variables.

So - how to pass the variables so that when it is deployed via wifi it will see them? (Hardcoding is not an option)

launching via ionic capacitor run android --device with the help of adb

How to pass .env variables via wireless debugging (adb)?

$
0
0

We are using Vite so its import.meta.env.VITE_APP_SEARCH. When I build the regular way - the keys are in the final bundle.
But via wireless for some reason it does not pass the variables as I understood.

IOS - ITMS-91061: Missing privacy manifest

$
0
0

The privacy manifest only gets checked during a full submission.

My app works fine in TestFlight.
Went through all the testing etc then got rejected based on the privacy manifest.

How to pass .env variables via wireless debugging (adb)?


No haptics for Toggle

$
0
0

Haptics work automatically if you swipe to toggle it on or off. They don’t work if you merely tap the switch.

No haptics for Toggle

$
0
0

You might need to trigger haptic feedback manually using Haptics.impact() from @capacitor/haptics. Also, ensure your device settings allow haptic feedback. Let me know if you need help setting it up!

Guidance on Using Capacitor Federation Plugin

Web Server Cache Issue with Ionic App

$
0
0

Well, ionic build doesn’t actually do the building of the web app. It hands off the build to whatever underlying stack you are using. Angular, the Angular CLI, Vue the Vue CLI or Vite, and similarly with React.

I am not familiar with Angular or React, but I would assume any stack these days should be creating unique file names per build so the cache gets busted.

I already gave you a solution to handle index.html.

In regards to -

that was suggested to handle when users leave your app open in the web browser for days on end, they never refresh getting a new index.html file. So, alerting them that there is a new version is a good option.

Web Server Cache Issue with Ionic App

$
0
0

Yes i am using Angular

So ideally if I understood it correctly the index.html should have some changes inside it so that browser does not depend on cacheed version

Viewing all 230447 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>