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.
Related
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
There is a great tutorial video on the official Ionic YouTube channel which will show you a best-case scenario for upgrading to Ionic 5 and Angular 9.
However for my simple prototype app that I had made last year (just a demo that let me reorder a list) I tried to update but almost immediately came off the rails.
It turned out to be using "#angular/core": "^7.2.2" which broke the app from ionic serve because it was expecting Angular 8.
Then I tried to run the ng upgrade but got hit with incompatible peer dependencies for codelyzer, #ionic/angular-toolkit, and #angular/http.
So I tried to upgrade to Angular 8 first with npm i #angular/core#"~8.x.x" but that failed as it needed npm i zone.js#~0.9.1.
How can I update successfully to the latest and greatest?
So for people coming from angular 7 it seems for this project the correct upgrade commands are:
npm i #ionic/angular#latest
npm i zone.js#~0.9.1
npm i #angular/core#"~8.x.x"
npm i #ionic/angular-toolkit#latest
npm i codelyzer#latest
npm remove #angular/http
ng update #angular/core #angular/cli --allow-dirty
and it finally updated everything. However I did see a warning saying Package not installed: "--allow-dirty". Skipping.
However, then after that I dared to try ionic build and it failed with this error, which got me stuck for another 15 minutes:
zone-flags.ts is missing from the TypeScript compilation.
It seems that the polyfills.ts uses the .ts extension in the include which is breaking the compilation.
I changed this line in polyfills.ts:
import './zone-flags.ts';
To this:
import './zone-flags';
AND IT COMPILED.
But did it ionic serve?
No. No it did not.
The browser showed this in the console:
Error: Angular JIT compilation failed: '#angular/compiler' not loaded!
So after some more searching, I found that if you open main.ts and then add
import '#angular/compiler';
Near the top then all will be right and good with the world once more...
...unless your project then needs the markup breaking changes resolving, but you're on your own for that.
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.
Gulp serve:before tasks are not running in the Ionic CLI v3. They used to run well in Ionic CLI 2 and Ionic CLI 1.
gulp.task('serve:before', ['watch']);
This is the task. My app uses Ionic 1 and I did the necessary configurations and it is running well on Ionic CLI 3 upon ionic serve but not the gulp task serve:before is not running.
I believe you can update your code from:
gulp.task('serve:before', ['watch'])
to
gulp.task('ionic:watch:before', ['watch'])
If you install the ionic gulp plugin here.
My task also had a 'default' task, which can just be included alongside the watch task as before, so mine currently looks like this:
gulp.task('ionic:watch:before', ['default', 'watch'])
The weird thing is that it does not show any of the code being compiled on startup as it used to, but it does seem to actually do this.
=======================================
Update for ionic CLI 4
I had to update the task name to the following in ionic cli 4:
gulp.task('ionic:serve:before', ['default', 'watch'])
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