Capacitor npx cap run ios Shows raw HTML with out style - capacitor

Dears,
I have recently migrated our Cordova + React app to Capacitor, the app works fine in android. But in IOS it's weird. when I run npx cap run ios, it show raw html (With out any effect of style.(css folder and it contents are there in public folder.)).
The weird thing in , if run the same app using xcode it works fine.
I am using gulp for the bundling the js, assets & css files.
npx cap doctor output is below.
💊 Capacitor Doctor 💊
Latest Dependencies:
#capacitor/cli: 3.4.3
#capacitor/core: 3.4.3
#capacitor/android: 3.4.3
#capacitor/ios: 3.4.3
Installed Dependencies:
#capacitor/cli: 3.4.3
#capacitor/core: 3.4.3
#capacitor/android: 3.4.3
#capacitor/ios: 3.4.3
[success] iOS looking great! 👌
[success] Android looking great! 👌

Related

Flutter on a MacBook M1: Unable to get flutterfire_cli to work while setting up a Web App

I'm VERY new to the Mac OS (I'm running macOS Monterey v12.4) on an M1 Macbook Pro.
I have Flutter installed and have built a few sandbox apps with this framework.
I'm trying to build a web application with Flutter and Cloud Firestore and thought it best to use the flutterfire_cli to do some of the configurations but I'm stuck trying to run a specific setup command.
The command that I'm trying to run is "dart pub global activate flutterfire_cli" from a terminal. The output that I get is the following when I run this (the error is at the bottom):
ansi_styles 0.3.2+1s...
args 2.3.1
async 2.9.0
ci 0.1.0
cli_util 0.3.5
collection 1.16.0
dart_console 1.0.0
deep_pick 0.10.0
ffi 1.2.1 (2.0.0 available)
file 6.1.2
flutterfire_cli 0.2.2+2
http 0.13.4
http_parser 4.0.1
interact 2.1.1
json_annotation 4.5.0
matcher 0.12.11
meta 1.8.0
path 1.8.2
petitparser 5.0.0
platform 3.1.0
process 4.2.4
pub_semver 2.1.1
pub_updater 0.2.2
pubspec 2.2.0
quiver 3.1.0
source_span 1.9.0
stack_trace 1.10.0
string_scanner 1.1.1
term_glyph 1.2.0
tint 2.0.0
typed_data 1.3.1
uri 1.0.0
win32 2.6.1 (2.7.0 available)
xml 5.4.1 (6.1.0 available)
yaml 3.1.1
Could not find a file named "pubspec.yaml" in "/Users/myusername/.pub-cache/hosted/pub.dartlang.org/flutterfire_cli-0.2.2+2".
When I try to run the next command according to the documentation here: https://firebase.google.com/docs/flutter/setup?platform=web
That command is "flutterfire configure" from within Android studio
I get the following error: "zsh: command not found: flutterfire"
I'm running node version "v16.15.1" and nvm version "0.39.1" with npm version "8.12.1"
Has anyone run into this?
Thanks!
In your termianl run:
export PATH="$PATH":"$HOME/.pub-cache/bin"
Then try to use flutterfire command in your project directory.
Thanks for that response shuster.
I'm afraid that my environment needed abit more help as there were errors when running several commands. I'll outline the steps I used below to finally get this working.
Steps to resolve the issue
Delete Node and NPM (aka - fresh start)
This post here outlined a straightforward way to do this: https://www.positronx.io/how-to-uninstall-node-js-and-npm-from-macos/
Reinstall node WITHOUT using the 'sudo' command using NVM
Verify that all versions are in place and working for NVM, NODE and NPM - all good
Was still getting issues with the command from Dart to activate the flutterfire_cli "dart pub global activate flutterfire_cli"
I didn't capture the exact error, but there was a complaint about a PUBSPEC.YAML missing
I suspected that something was wrong with my Dart installation or cache, so I decided to try clearing the cache
Repairing the cache using this command "dart pub cache repair" produced a "permissions denied" error on the .pub-cache folder
Cleaning the DART cache using this command "dart pub cache clean" produced the same "permissions denied" error on the same folder
So, I went in and deleted everything in that .pub-cache folder manually
I then went back to the terminal and ran the command "dart pub global activate flutterfire_cli" to try and get Dart into a better place
This worked but I got an error message (basically) stating that the path was wrong for a global command and I needed to run "export PATH="$PATH":"$HOME/.pub-cache/bin"
If I ran that PATH command from the terminal, then the Flutterfire CLI would work for that session only but not work in my IDE (Android Studio) unless I ran that same command again inside the IDE
At this point I knew I was very close and needed to figure out how to get this Mac to keep that setting all the time
After some digging into what this "zsh" thing was, I found a post that explained it very well and was able to make the change permanent https://wpbeaches.com/how-to-add-to-the-shell-path-in-macos-using-terminal/
 
Hope this helps someone - happy coding!

How to fix White Screen in Production Android APK

Using ionic version 4 to build an android app , while building developer mode the app is working fine on android device. When deploying in --prod --release mode the app shows white screen after splashscreen. Followed playstore publish methods by generating keystore and zipalign no luck.
On the same application as PWA release , can see a chrome console says Failed to load resource: the server responded with a status of 404 (Not Found)- cordova.js
ionic CLI : 4.12.0
ionic Framework : ionic-angular 3.9.2
ionic/app-scripts : 3.2.3
Cordova CLI : 8.1.1
Cordova Platforms : Android 7.1.4
i've tried so many solutions online nothing works for me
so i downgrade my typescript 2.6.2 and it works fine

Ionic v4: "Ionic cordova run -l" won't start my app

Additional notes for upcoming viewers
This seems to be a common problem on macOS: https://github.com/ios-control/ios-sim/issues/253
Temporary solution below this question.
I've worked on a fresh ionic project a few days ago and I had no problems back then whatsoever.
Today I tried to start the development server: ionic cordova run -l but then I got this error message:
No target specified for emulator. Deploying to undefined simulator
Device type "com.apple.CoreSimulator.SimDeviceType.undefined" could not be found.
An error occurred while running subprocess cordova.
Logging currently available devices(ionic cordova run --list) gives me this output:
Available ios devices:
Available ios virtual devices:
It is empty. None devices are available. Not for ios and neither for android.
Ionic version: 4.12.0
Cordova version: 9.0.0
Nodejs version: 11.5.0
I would appreciate any help to make this work again.
Seems like you have upgraded the Mac OS, faced similar problem in past and updating and re-installing iOS-sim was not of much help.
For me following command worked without installing anything further
ionic cordova emulate ios --livereload --consolelogs --target="iPhone-6,com.apple.CoreSimulator.SimRuntime.iOS-12-2"
Also, you can try this one if above don't work
ionic cordova emulate ios --livereload --consolelogs --target="iPhone-6,com.apple.CoreSimulator.SimRuntime.iOS-12-2" --buildFlag="-UseModernBuildSystem=0"
Do the following:
cd platforms/ios/cordova && npm install ios-sim#latest
cd ../../../
cordova platform rm ios
cordova platform add ios#4.5.0
ionic cordova emulate ios --target --list
ionic cordova plugin rm cordova-plugin-console
That should do it.

Ionic Live Reload not working

Live Reload has stopped working.
When I save code changes, the browser automatically refreshes, but code changes are not reflected. I need to stop my CLI and run ionic serve again in order to have any code changes reflected in the browser.
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002
I think your problem is with your current project.So please create a new project like below.
ionic start myfirstapp blank --v2
After that see whether live reload is working or not.It should work now.
ionic serve
Note: If above one is working then you can copy/ paste your previous project's custom items where you have created to this project.Hope that solution will be much quicker than try to find a solution with the old project.That is my idea.
I did these to resolve this error on my ubuntu
Remove the npm_folder and package-lock.json files
Run npm install --save-dev
Restart your system

Ionic run / build not working

when execute "ionic run android " nothing happens !!!
No Errors, No Messages - what happens?
I had the same issue, dropping my version of Node to 4.2.1 fixed it.
See: Ionic run does nothing
I thing the steps below can help, at least you can get a better log, to solve your problem:
Make sure you added a platform to your project
$ ionic platform add android
Once you have a platform try to run using cordova
$ cd {YOUR_PROJECT_DIR}/platforms/android/cordova
$./run
i just got in same kind..!
so,just check setup with ionic info command
Your system information:
Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.2 LTS
Node Version: v5.4.0
i just upgrade cordova version to 5.4.1
this setup,worked for me..!
fix is here (FOR WINDOWS ONLY)
I am facing the same problem of Build then i finally found out the solution.
SOLUTION
So You must have the Android Api 23 in order for this command to work.
Error of Daemon process will be solve after installing the Api 23 and extra build tools and run command
COMMAND : cordova build android --release
I am sure this fix would help you to solve the problem.
STEPS
1. First check the version of android through this COMMAND:
cordova platform help
2. Run the build command after installing the Api 23 and extra build tools.
3. If Even this not work then Try add the variable in the
Environment variables > System variables >
add _JAVA_OPTIONS and value = -Xmx512M
Then Run cordova build android --release
BUT FIRSTLY SET UP THE ENVIRONMENT VARIABLES
Environment Variable setup Image
android API 23
COPY FROM HERE
ENVIRONMENT VARIABLES:-
USER VARIABLES
PATH
C:\Ruby23\bin;C:\Users\kumar\AppData\Roaming\npm;C:\ANDROID_SDK\tools;%SystemRo
ot%\system32; %SystemRoot%; %SystemRoot%\System32\Wbem;
SYSTEM VARIABLES
ADD NAME AND VALUE
2.1 _JAVA_OPTIONS -Xmx512M
2.2 ANDROID_HOME C:\ANDROID_SDK
2.3 PATH ->
C:\ProgramFiles\Java\jdk1.8.0_60\bin;C:\ProgramFiles\nodejs;C:\Gradle\gradle-4.0\bin;C:\ANDROID_SDK\tools;%SystemRoot%\system32; %SystemRoot%; %SystemRoot%\System32\Wbem;%SystemRoot%\system32; %SystemRoot%; %SystemRoot%\System32\Wbem;