I’m confused why you’re trying to use both capacitor and cordova. What happens if you try creating the project with only capacitor and no cordova?

I have an IonSplitPane that contains a menu and its pane. Most of the time this works fine, but sometimes when I load the page I get a blank screen. When this happens, the things inside the split pane are rendered into the DOM, but they aren’t showing up. The only difference I can see in the DOM is the presence of the sc-ion-md-h and sc-ion-md-s classes on it when it is broken but not when it works. This doesn’t work:

<ion-split-pane content-id="main" class="AdminRouter_splitPane__2jlCl sc-ion-split-pane-md-h md split-pane-md split-pane-visible sc-ion-split-pane-md-s hydrated">

But this does:

<ion-split-pane content-id="main" class="AdminRouter_splitPane__2jlCl md split-pane-md split-pane-visible hydrated">

I would really love to just figure out why those classes are there, but I’m pretty stumped by what’s going on in the code. Why would they be there sometimes but not always? What do they represent?

FWIW I can pretty readily reproduce this by clearing my browser cache and loading the page. It will generally be blank after that, but on a subsequent reload it works fine.

Thanks!!!

Hi Andy, I’m having the same problem but in my case those classes are only sometimes present. It works when they’re not present but is broken when they are. Did you have any luck diagnosing this? I can’t figure out where they’re coming from either.

At the end I decided to implement as single tabs like :

<super-tabs tabsPlacement="top">
<super-tabs-toolbar slot="top">
  <super-tab-button *ngFor="let tab of tabs">
	<ion-icon name="{{tab.icon}}"></ion-icon>
	<ion-label>{{tab.title}}</ion-label>
  </super-tab-button>
</super-tabs-toolbar>
<super-tabs-container autoScrollTop>
  <super-tab>
	<ion-nav [root]="pageProducts"></ion-nav>
  </super-tab>
  <super-tab>
	<ion-nav [root]="pageSettings"></ion-nav>
  </super-tab>
</super-tabs-container>
</super-tabs>

in this way it works but I’d know anyway if there is a trick to use °ngFor also for super-tabs-container…
Thanks
Cheers!

I don’t know whether this will impact your question about the background color or not, but I’m seeing several Ionic elements outside of what I would consider their comfort zones:

• <ion-item>s are generally inside <ion-list>s.
• <ion-card>s are for organizing collections of information for display in a summary mode - they aren’t arbitrary catch-all elements suitable for laying out a login form
• I don’t see the purpose of the <ion-grid> here (well, frankly, anywhere, but that’s a separate discussion). If all you’re trying to do is center the form in the viewport, that can be done just using flexbox.

So, if we get rid of the card, either get rid of the items or wrap them within an <ion-list>, and lay the form out with ordinary CSS instead of a one-element “grid”, do we still have the issue with the background colors, or does it magically go away?

When I serve my Angular Ionic app through Capacitor and use the XCode simulators/use my own iPhone, the accessory bar does not appear when going through inputs. When I do Keyboard.setAccessoryBarVisible({isVisible: true}); it does, but it seems fairly buggy, for example in my <ion-slide> where I have a fair few input, the arrows go down but then stop before going to the last input in the list, I assume since the view does not move down with the input? (The arrows stop when we get to the input the view is just about not showing)

Thank you, the issue was as you described.

my Mac put on a forced update (big sur) last night , and it forced an XCODE (13) update

and now my app doesn’t build to run on my iphone

no such module capacitor

the node_modules/@capacitor/ios folder is there
npx cap sync works

I see search results that suggest deleting the ios folder and adding it again…
but there are a bunch of settings (many I don’t remember) that will be lost…

Snip20210820_2845×232 34 KB

this works in the ios/App/App folder
xcodebuild -workspace App.xcworkspace -scheme App build

Hi I had built an android app in android studio for Google play (a beta version). I made some changes to my code and am trying to upload a new version of the app to Google Play.

I try to do a ionic capacitor build android and I get this error:

Could not find the web assets directory: ./www.
Please create it and make sure it has an index.html file. You can change
the path of this directory in capacitor.config.json (webDir option). You
may need to compile the web assets for your app (typically npm run
build). More info:
Capacitor - build cross platform apps with the web

Other threads related to this say I should run a npm run build. This does not solve my problem. I followed the link for “more info” and don’t really know how it helps. If no one knows the way to solve my issue, can someone point me to a tutorial on what the ./www assets are for and what they do?

Thanks.

Bandar Togel Terpercaya dan Terbaik
Aktif 24 Jam

Hi! We have exactly the same issue, but haven’t figured out where they’re coming from yet. Nobody has replied here or on Stack.

The value a mobile app creates and the ability it gives you to engage customers is really incredible. If you know that a mobile app can be a game changer in your business, you are wonderful. No doubt, you can outstandingly energize your business performance by investing in a mobile app. With more and more people addicting to smartphones and using them for shopping, communicating and paying bills etc., it is a golden time for businesses to jump up their business to the next level with a mobile app.

#Bestappdevelopmentcompanyinunitedkingdom, #Topmobileappdevelopmentinunitedkingdom, #iOSappdevelopmentcompanyinunitedkingdom, #AndroidAppdevelopmentcompanyinunitedkingdom

for more info visit : https://www.sdlccorp.com/mobile-development/
or call: +1 (618) 6154906

SDLC have developed over 200 native consumer and enterprise apps for mobile platforms including iOS and Android. We are a member of the iOS App Developer Program,
a registered Google Play Developer.
#Top mobile app development, #iOS app development company,
#Android app development company, #Best mobile app development company.

Visit us at:-https://www.sdlccorp.com/mobile-development/
Call us at:- +1 (618)6154906

Please help me find solution for it in angular ionic.
I have a reactive form for registration where I want to allow user to enter a valid zip code based on the selection he made for state and city.
I have searched for it but not able to find solution. Mostly people were asking for the reverse of it which is to get state and city based on zip code but i need zip code based on state and city. Any help would be appreciated.

@rapropos please look into it.

Have you even googled correctly for your question? This has been asked many times and there are plenty of answers out there instead of demanding someone look into it for you. It’s not that hard to do.

you need to delete the iOS folder and re add it again, no way around this.

Hi,

I am trying to enable live reload on my android device.
Android studio is working.

But when I try ionic cap run android -l --external, this issue was produced.

I have added JAVA_HOME to my system variable and add %JAVA_HOME%\bin to the PATH.
I also tried to explicitly define the path in gradle.properties
But none of them works.

Could you suggest what can I do to fix this problem
Thanks

(base) PS D:\work\personal\cheese> ionic cap run android -l --external
? Which device would you like to target? Xiaomi MI 6 (9abf2c96)
> capacitor.cmd sync android
[capacitor] √ Copying web assets from dist to android\app\src\main\assets\public in 238.98ms
[capacitor] √ Creating capacitor.config.json in android\app\src\main\assets in 1.75ms
[capacitor] √ copy android in 282.69ms
[capacitor] √ Updating Android plugins in 8.97ms
[capacitor] [info] Found 6 Capacitor plugins for android: 
[capacitor]        @capacitor-community/bluetooth-le@1.1.2
[capacitor]        @capacitor/app@1.0.2
[capacitor]        @capacitor/camera@1.0.3
[capacitor]        @capacitor/haptics@1.0.2
[capacitor]        @capacitor/keyboard@1.0.2
[capacitor]        @capacitor/status-bar@1.0.2
[capacitor] √ update android in 132.79ms
[capacitor] [info] Sync finished in 0.42s
> vue-cli-service.cmd serve
[vue-cli-service]  INFO  Starting development server...

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://192.168.1.89:8100

       Use Ctrl+C to quit this process

[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8100/
[vue-cli-service]   - Network: http://192.168.1.89:8100/
[vue-cli-service]   Note that the development build is not optimized.
[vue-cli-service]   To create a production build, run npm run build.
[vue-cli-service] Issues checking in progress...
> capacitor.cmd run android --no-sync --target 9abf2c96
[vue-cli-service] No issues found.
[capacitor] × Running Gradle build - failed!
[capacitor] [error] 
[capacitor]         > Configure project :app
[capacitor]         google-services.json not found, google-services plugin not applied. Push Notifications won't work
[capacitor]         WARNING:: Using flatDir should be avoided because it doesn't support any meta-data formats.
[capacitor]
[capacitor]         > Configure project :capacitor-cordova-android-plugins
[capacitor]         WARNING:: Using flatDir should be avoided because it doesn't support any meta-data formats.
[capacitor]
[capacitor]         > Task :app:preBuild UP-TO-DATE
[capacitor]         > Task :app:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-android:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-android:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-android:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-app:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-app:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-app:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-camera:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-camera:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-camera:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-community-bluetooth-le:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-cordova-android-plugins:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-haptics:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-haptics:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-haptics:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-keyboard:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-status-bar:preBuild UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:preDebugBuild UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:compileDebugAidl NO-SOURCE
[capacitor]         > Task :app:compileDebugAidl NO-SOURCE
[capacitor]         > Task :capacitor-android:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-app:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-camera:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-community-bluetooth-le:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-cordova-android-plugins:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-haptics:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-keyboard:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-status-bar:packageDebugRenderscript NO-SOURCE
[capacitor]         > Task :app:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :app:generateDebugBuildConfig UP-TO-DATE
[capacitor]         > Task :app:javaPreCompileDebug UP-TO-DATE
[capacitor]         > Task :capacitor-android:writeDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :capacitor-app:writeDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :capacitor-camera:writeDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:writeDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :capacitor-haptics:writeDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:writeDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:writeDebugAarMetadata
[capacitor]         > Task :capacitor-status-bar:writeDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :app:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :app:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-android:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-android:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :capacitor-android:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-android:packageDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-app:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-app:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :capacitor-app:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-app:packageDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-camera:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-camera:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :capacitor-camera:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-camera:packageDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-community-bluetooth-le:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:packageDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-cordova-android-plugins:generateDebugResValues
[capacitor]         > Task :capacitor-cordova-android-plugins:generateDebugResources
[capacitor]         > Task :capacitor-cordova-android-plugins:packageDebugResources
[capacitor]         > Task :capacitor-haptics:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-haptics:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :capacitor-haptics:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-haptics:packageDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-keyboard:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :app:checkDebugAarMetadata UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:packageDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:compileDebugRenderscript NO-SOURCE
[capacitor]         > Task :capacitor-status-bar:generateDebugResValues UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:generateDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:packageDebugResources UP-TO-DATE
[capacitor]         > Task :app:mergeDebugResources UP-TO-DATE
[capacitor]         > Task :app:createDebugCompatibleScreenManifests UP-TO-DATE
[capacitor]         > Task :app:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-android:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-android:processDebugManifest UP-TO-DATE
[capacitor]         > Task :capacitor-app:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-app:processDebugManifest UP-TO-DATE
[capacitor]         > Task :capacitor-camera:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-camera:processDebugManifest UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:processDebugManifest UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:extractDeepLinksDebug
[capacitor]         > Task :capacitor-haptics:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-haptics:processDebugManifest UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:processDebugManifest UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:extractDeepLinksDebug UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:processDebugManifest UP-TO-DATE
[capacitor]         > Task :capacitor-android:compileDebugLibraryResources UP-TO-DATE
[capacitor]         > Task :capacitor-android:parseDebugLocalResources UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:processDebugManifest
[capacitor]         > Task :capacitor-android:generateDebugRFile UP-TO-DATE
[capacitor]         > Task :app:processDebugMainManifest UP-TO-DATE
[capacitor]         > Task :app:processDebugManifest UP-TO-DATE
[capacitor]         > Task :app:processDebugManifestForPackage UP-TO-DATE
[capacitor]         > Task :capacitor-app:compileDebugLibraryResources UP-TO-DATE
[capacitor]         > Task :capacitor-app:parseDebugLocalResources UP-TO-DATE
[capacitor]         > Task :capacitor-app:generateDebugRFile UP-TO-DATE
[capacitor]         > Task :capacitor-camera:compileDebugLibraryResources UP-TO-DATE
[capacitor]         > Task :capacitor-camera:parseDebugLocalResources UP-TO-DATE
[capacitor]         > Task :capacitor-camera:generateDebugRFile UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:compileDebugLibraryResources UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:parseDebugLocalResources UP-TO-DATE
[capacitor]         > Task :capacitor-community-bluetooth-le:generateDebugRFile UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:compileDebugLibraryResources
[capacitor]         > Task :capacitor-haptics:compileDebugLibraryResources UP-TO-DATE
[capacitor]         > Task :capacitor-haptics:parseDebugLocalResources UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:parseDebugLocalResources
[capacitor]         > Task :capacitor-haptics:generateDebugRFile UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:compileDebugLibraryResources UP-TO-DATE
[capacitor]         > Task :capacitor-keyboard:parseDebugLocalResources UP-TO-DATE
[capacitor]         > Task :capacitor-cordova-android-plugins:generateDebugRFile
[capacitor]         > Task :capacitor-keyboard:generateDebugRFile UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:compileDebugLibraryResources UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:parseDebugLocalResources UP-TO-DATE
[capacitor]         > Task :capacitor-status-bar:generateDebugRFile UP-TO-DATE
[capacitor]         > Task :app:processDebugResources UP-TO-DATE
[capacitor]         > Task :capacitor-android:generateDebugBuildConfig UP-TO-DATE
[capacitor]         > Task :capacitor-android:javaPreCompileDebug UP-TO-DATE
[capacitor]         > Task :capacitor-android:compileDebugJavaWithJavac FAILED
[capacitor]
[capacitor]         FAILURE: Build failed with an exception.
[capacitor]
[capacitor]         * What went wrong:
[capacitor]         Execution failed for task ':capacitor-android:compileDebugJavaWithJavac'.
[capacitor]         > Could not find tools.jar. Please check that C:\Program Files\Java\jre1.8.0_301 contains a valid JDK installation.
[capacitor]
[capacitor]         * Try:
[capacitor]         Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.      
[capacitor]
[capacitor]         * Get more help at https://help.gradle.org
[capacitor]
[capacitor]         Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.
[capacitor]         Use '--warning-mode all' to show the individual deprecation warnings.
[capacitor]
[capacitor]         BUILD FAILED in 2s
[capacitor]         See https://docs.gradle.org/7.0/userguide/command_line_interface.html#sec:command_line_warnings
[capacitor]         78 actionable tasks: 9 executed, 69 up-to-date
[capacitor]
[ERROR] An error occurred while running subprocess capacitor.

Trying to run SSR in ionic, I’m running into head.querySelector is not a function. This is using latest ionic/angular-server; win.Matchmedia error is gone but now there’s this.

Any ideas? This is coming from bootstrapLazy on build.

This was a reported in ionic/stencil which looks like it had a fix.
I’m on ionic angular

I’m using tabs in my Ionic React app. I’m trying to minimize re-renders of one of my tabs because the renders are expensive, so I did this:

  const [isVisible, setIsVisible] = useState(true);

  useIonViewWillEnter(() => {
    setIsVisible(true);
  });

  useIonViewWillLeave(() => {
    setIsVisible(false);
  });

  if (!isVisible) {
    return null;
  }

This dramatically reduces the re-renders (great!), but the problem is that it introduces a small flicker when switching to the tab. I assume the flicker is because I am returning null initially… what can I do to return something that will eliminate the flicker but not cause a component re-render?