Ionic-cli: Cordova plugins not working for device / simulator when using --livereload

Created on 21 Nov 2016 · 12Comments · Source: ionic-team/ionic-cli

FIXED WITH @ionic/app-scripts version 0.0.47

This issue is fixed if you update @ionic/app-scripts devDependency in your package.json:

"devDependencies": {
    "@ionic/app-scripts": "0.0.47"
}

Short description of the problem:

When running for device / simulator with --livereload the Cordova plugins are not working because cordova.js is mocked.

What behavior are you expecting?

Cordova plugins working without mocking cordova.js.

Steps to reproduce:

Create a simple project using ionic start sampleapp --v2.
Add some Cordova plugin to your project using ionic plugin add [your-cordova-plugin].
Run the project for the iOS or Android device / simulator using ionic run ios --emulator --livereload or ionic emulate ios --livereload.

Output:

[09:30:33]  ionic-app-scripts 0.0.45 
[09:30:33]  watch started ... 
[09:30:33]  build dev started ... 
[09:30:33]  clean started ... 
[09:30:33]  clean finished in 4 ms 
[09:30:33]  copy started ... 
[09:30:33]  transpile started ... 
[09:30:35]  transpile finished in 1.99 s 
[09:30:35]  webpack started ... 
[09:30:35]  copy finished in 2.10 s 
[09:30:40]  webpack finished in 5.21 s 
[09:30:40]  sass started ... 
[09:30:42]  sass finished in 1.07 s 
[09:30:42]  build dev finished in 8.29 s 
[09:30:42]  watch ready in 8.32 s 
[09:30:42]  dev server running: http://192.168.24.204:8000/

Test that your Cordova plugin funcionality is not working.

Post the output of ionic info below please

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v7.1.0
Xcode version: Xcode 8.1 Build version 8B62

Source

pjorquera

👍18

All 12 comments

I was just about to add an issue for this.

It happens in iOS simulator, but also on iOS device + Android device.

biesbjerg on 21 Nov 2016

Really, @biesbjerg ! I changed the title and description of the issue for that.

I suppose the problem is related with dev builds, not directly with --livereaload. But --livereload produces always dev builds and that dev builds has a mocked version of file cordova.js with the following content:

// mock cordova file during development

I don't know why dev builds use a mocked version of cordova.js, but I think that can be fixed using one of the following:

Adding support for creating prod builds when using --livereload (for me that will be perfect)
-- or --
Disabling mocking cordova.js when creating dev builds

Anyway, creating a prod build (i.e. without using --livereload) the output binary supports correctly Cordova plugins (either for the simulator and for the device).

pjorquera on 21 Nov 2016

Any progress?

dejancencelj on 22 Nov 2016

👎3 😕1

Full of bugs. Ionic 2 team has done a great job but unfortunately when debugging etc is way way behind. Disappointed.

pantonis on 28 Nov 2016

After upgrading to RC3. My project was screwed up. So sad for that.

hpwahyao on 1 Dec 2016

@pjorquera , I tried to fix another bug in RC3. It accidentally fixes the issue you mention.
https://github.com/driftyco/ionic-app-scripts/issues/473

hpwahyao on 1 Dec 2016

@hpwahyao this fix disable livereload

condorman on 10 Dec 2016

👍1

@biesbjerg @pantonis @hpwahyao I found a temporary workaround for fixing this issue: using latest (HEAD) version of @ionic/app-scripts.

You can found the full instructions for applying the fix in the edited description of this issue. Anyway, the steps are the following:

Edit your package.json and use the following version for @ionic/app-scripts dev dependency:

"devDependencies": {
  "@ionic/app-scripts": "https://github.com/driftyco/ionic-app-scripts"
}

Update dependencies and build the @ionic/app-scripts dependency:

npm install
cd node_modules/\@ionic/app-scripts/
npm install
npm run build

Copy or move your main.dev.ts to main.ts:

cd src/app
cp main.dev.ts main.ts

Start your project with livereload, cordova and debug support:

ionic run ios --emulator --livereload -c -s

pjorquera on 10 Dec 2016

npm install
cd node_modules/@ionic/app-scripts/
npm install
npm run build

>> npm run build failed with following errors.

ajay:app-scripts$ npm run build

@ionic/[email protected] build /home/ajay/a/ionic2/ionic2RC-2.1.3/demo/demo-cordova-livereload/node_modules/@ionic/app-scripts
npm run clean && tsc && npm run sass

@ionic/[email protected] clean /home/ajay/a/ionic2/ionic2RC-2.1.3/demo/demo-cordova-livereload/node_modules/@ionic/app-scripts
rimraf ./dist

@ionic/[email protected] sass /home/ajay/a/ionic2/ionic2RC-2.1.3/demo/demo-cordova-livereload/node_modules/@ionic/app-scripts
node-sass ./src/dev-client/sass/ion-dev.scss --output ./bin/ --output-style compressed

No input file was found.

npm ERR! Linux 4.2.0-27-generic
npm ERR! argv "/opt/node6npm3IonicRC0/node-v6.7.0-linux-x64/bin/node" "/opt/node6npm3IonicRC0/node-v6.7.0-linux-x64/bin/npm" "run" "sass"
npm ERR! node v6.7.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! @ionic/[email protected] sass: node-sass ./src/dev-client/sass/ion-dev.scss --output ./bin/ --output-style compressed
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ionic/[email protected] sass script 'node-sass ./src/dev-client/sass/ion-dev.scss --output ./bin/ --output-style compressed'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @ionic/app-scripts package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-sass ./src/dev-client/sass/ion-dev.scss --output ./bin/ --output-style compressed
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @ionic/app-scripts
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @ionic/app-scripts
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ajay/a/ionic2/ionic2RC-2.1.3/demo/demo-cordova-livereload/node_modules/@ionic/app-scripts/npm-debug.log

npm ERR! Linux 4.2.0-27-generic
npm ERR! argv "/opt/node6npm3IonicRC0/node-v6.7.0-linux-x64/bin/node" "/opt/node6npm3IonicRC0/node-v6.7.0-linux-x64/bin/npm" "run" "build"
npm ERR! node v6.7.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! @ionic/[email protected] build: npm run clean && tsc && npm run sass
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ionic/[email protected] build script 'npm run clean && tsc && npm run sass'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @ionic/app-scripts package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run clean && tsc && npm run sass
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @ionic/app-scripts
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @ionic/app-scripts
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ajay/a/ionic2/ionic2RC-2.1.3/demo/demo-cordova-livereload/node_modules/@ionic/app-scripts/npm-debug.log

hoodaajay99 on 14 Dec 2016

When revert to @ionic/[email protected], it starts to build fine again.

hoodaajay99 on 14 Dec 2016

@hoodaajay99 It's fixed if you update your package.json the following dev dependency:

"devDependencies": {
    "@ionic/app-scripts": "0.0.47"
}

pjorquera on 14 Dec 2016

👍1

I've this config:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

and i've started a new app with: ionic start pic3 blank --v2 --ts
but i've the same error running ionic serve cmd:

Native: tried calling Splashscreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

about my dev script:

"devDependencies": {
"@ionic/app-scripts": "1.0.0",
"typescript": "2.0.9"

whats wrong ?