How to Create Custom SplashScreen on Ionic? - ionic-framework

I want show custom splash screen with animation. I tried add LottieSplashScreen plugin but i can't do this.
Tried with this code
cordova plugin add cordova-plugin-lottie-splashscreen
But i facing
'sh' is not recognized as an internal or external command,
operable program or batch file.
Failed to install 'cordova-plugin-lottie-splashscreen': Error: Hook failed with error code ENOENT: C:\Users\bbara\Desktop\GuvercinSepetim\plugins\cordova-plugin-lottie-splashscreen\hooks\ios\update_pod_repo.sh
at C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\hooks\HooksRunner.js:224:23
at _rejected (C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:864:24)
at C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:890:30
at Promise.when (C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:1142:31)
at Promise.promise.promiseDispatch (C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:808:41)
at C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:624:44
at runSingle (C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:137:13)
at flush (C:\Users\bbara\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:125:13)
at processTicksAndRejections (internal/process/next_tick.js:74:9)
Hook failed with error code ENOENT: C:\Users\bbara\Desktop\GuvercinSepetim\plugins\cordova-plugin-lottie-splashscreen\hooks\ios\update_pod_repo.sh

You are running a cordova node but not ionic cordova:
cordova plugin add cordova-plugin-lottie-splashscreen
According to ionic documentation:
npm install #ionic-native/lottie-splash-screen
ionic cordova plugin add cordova-plugin-lottie-splashscreen
And here is the referance:
https://ionicframework.com/docs/native/lottie-splash-screen
And here is the github reposatory of the plugin :
https://github.com/timbru31/cordova-plugin-lottie-splashscreen

Try looking into Capacitor instead of Cordova. You can still use all your Cordova libraries, but the Capacitor build is a bit cleaner. I followed this tutorial and found it very useful with good tools. It worked for me first time, which is never the case with some Ionic stuff!
https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114/

The issue you are describing was fixed in the v0.8.1 release. It originated from preparing/building the iOS platform on a Windows machine - which won't work anyways. Because cordova-ios supports recent Pod installations out of the box, it's no longer required to sync the repo, i.e, the hook is obsolete. However, the lottie plugin won't fail anymore.
Side note: I'm the author of this plugin.

Related

ionic info command exits without any error

I got a new laptop and I installed node, ionic and angular. I added ANDROID_SDK_HOME, ANDROID_HOME and JAVA_HOME in environment. ionic version is 6.20.2, node version is v16.17.1 and angular version is 14.2.4 and npm version is 8.15.0. When I use ionic serve, application opens in browser. But when I use ionic info, it exits without any error. Same happens when I try ionic cap build android.
I had a similar error when generating the build for Android, the command ended without any error message or warning.
After many tests it was only solved by downgrading.
npm install --global #ionic/cli#6.20.1

Could not find cordova integration in the default project

following the official getting started tutorial I get the following error when I try to deploy the application in my phone using this command: ionic serve --devapp (it works on browser):
[ERROR] Could not find cordova integration in the default project.
I get this error both on Windows and MacOS.
I'm using Node 6.4.1 and Ionic CLI 4.10.3
Does the official tutorial missing something?
I had the same issue. In fact, with the default project, you have to copy the cordova assets to prepare the native build for mobile.
You can find more info here : Ionic documentation
Try this :
ionic cordova prepare
And then go again with :
ionic serve --devapp
The accepted answer is 100% correct .
But the reason why this occurred for me was that somehow the default was capacitor and not cordova.
so first i ran
ionic integrations disable capacitor
then ran
ionic cordova prepare
which solved my issue

Ionic config directory error. (How to solve)

I have a issue using ionic on my mac. I've cloned my repo and started it with ionic serve. But if I use control C and stop the command ant start it again I get this error "Cannot read property 'IONIC_CONFIG_DIRECTORY' of undefined".
Same problem here. Found the solution: https://forum.ionicframework.com/t/ionic-commands-not-working-after-update-ionic/146492/3
Solution:
npm uninstall ionic cordova
npm install ionic cordova

Ionic CLI: [ERROR] Gulpfile (or dependent module) not found: .\gulpfile.js

Senario
I recently upon running an Ionic 3 app, updated (well accidentally) the Ionic CLI version. Now upon running the build from command line, it produces the following error every time and halts the build:
In the error message it says to disable the gulp integration by running the command ionic config set gulp.enabled false which I did. But still getting the same error. I also tried to add the command to the start script of package.json to no avail (not needed though since it seems the config is set globally).
Any help would be appreciated.
Ionic CLI version: 3.9.2
Finally figured out what the problem was. Even if Gulp integration has been disabled with the command ionic config set gulp.enabled false, as long as Gulp is a Dev dependency (i.e. there is a reference to it in the package.json under devDependencies) the Ionic CLI would (well, logically) assume that the Ionic project has a dependency on Gulp, therefore would throw the error (see original post).
Solution
The solution for a case where you don't want Gulp integration, apart from disabling it by running the command ionic config set gulp.enabled false, is to also make sure Gulp is NOT under the devDependencies in the package.json file.
Hope this helps anyone else with a similar issue.
NOTE: Not sure from which version onwards Ionic requires integration with Cordova and Gulp in the shape of ionic.config.json file. Anyway, the above solution will be relevant for a similar case in any of those versions.

cordova add plugin - unable to access

I am trying to add a plugin to Cordova via
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
git itself seems to run fine. Running the following works:
git clone "https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git" "D:\Temp\plugman-tmp1390234462383"
This is what is used in plugins.js line 43 (var cmd = util.format(...)).
The error I receive using the cordova plugin add ... is:
Calling plugman.fetch on plugin "https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git"
Fetching plugin from "https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git"...
Fetching plugin via git-clone command: git clone "https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git" "D:\Temp\plugman-tmp1390235833828"
C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:126
throw e;
^
Error: Fetching plugin failed: Error: Command failed: Cloning into 'D:\Temp\plugman-tmp1390234462383'...
fatal: unable to access 'https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git/': Failed connect to git-wip-us.apache.org:443; No error
at C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\src\plugin.js:90:41
at _rejected (C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:808:24)
at C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:834:30
at Promise.when (C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:1079:31)
at Promise.promise.promiseDispatch (C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:752:41)
at C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:574:44
at flush (C:\Users\myUser\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:108:17)
at process._tickCallback (node.js:415:13)
Any idea?
Some more information:
I am going through a proxy, but I set this for git and for npm. I installed Cordova via "npm install cordova" and the project via "cordova create TestApp", I added platforms via "cordova platform add android" and I can run the app on the emulator.
I even tried "phonegap local plugin add https..." with the same result.
All that is missing for me is to add plugins.
Sometimes a Cordova update will cause problems with npm and will corrupt the "cordova cache" that NPM uses to quickly download different Cordova versions. I know there were problems with the server pushing the latest Cordova plugins to NPM, so maybe this is why you're having trouble.
I'd suggest deleting /AppData/Roaming/npm/node_modules/cordova direct in its entirety, than installing a fresh new copy with npm install -g cordova. This shouldn't remove any of your Cordova projects, it will just download a fresh set of the tools. When you run cordova commands, it might take longer the first time since the tools will have to go to the git repo's and fetch the content fresh.
Tried clearing the cordova cache by deleting the folder as suggested by #mbillau but that didn't help. I search for the plugin where I was getting the error and tried installing through command line but got the same error message. Finally the solution that worked for me:
open important files in your IDE
open Cordova plugins
replace all "https://git-wip-us.apache.org/repos/asf/" with "https://git.apache.org/"
and it worked perfectly.
Replace "git-wip-us.apache.org/repos/asf7" with "github.com/apache/"
Like #Max said.
Checking the apache site (either https://git-wip-us.apache.org/repos/asf/, https://gitbox.org/repos/asf/, or https://git.apache.org/) I only see commit logs instead of the sources.
The sources can be found on GitHub. This worked for me:
cordova plugin add https://github.com/apache/cordova-plugin-device.git