ionic serve doesn't support cordova browser plugins
xeoncross opened this issue · 48 comments
Some (but not all) cordova plugins have Javascript proxies if the features they offer can also be used in a regular browser.
I'm using one such plugin and I need to access the cordova.plugins.____ object. However, the cordova.js file is a 404 when using ionic serve. It's not a 404 when using ionic build browser.
How do you access the cordova object in javascript when using ionic serve? Or do you have to ionic build browser every single time you want to see your changes?
Create stubbed version of service:
Geo.service('Geolocation', function ($q){
this.getCurrentLocation = function (){
var d;
if(window.cordova){
d = $q.defer();
navigator.geolocation.getCurrentPosition(function (position){
d.resolve({
lat: position.coords.latitude,
lng: position.coords.longitude
});
}, function (){
d.resolve(DEFAULT_LOCATION);
}, {frequency:5000, maximumAge: 0, timeout: 5000});
return d.promise;
}
return $q.when(DEFAULT_LOCATION);
};
});Make sure everything works fine in browser, run your app in live mode on emulator like
$ ionic emulate android -l -c -sUse safari for iOS or Chrome for Android to debug app running on the device.
That is certainly a solution for skipping certain features when not on a mobile device - but what if the cordova plugin contains code for a browser version as well? Then you still have to access it via cordova.plugins and the only way it seems to get that cordova.js/cordova_plugins.js code is to run ionic build browser.
Is there no way to develop without having to rebuild all the time?
At the moment I'm trying to work around this by using the gulp file to process everything for me. I'm still surprised that you can't use a cordova plugin while developing in browser.
First I manually pulled the ./plugins/name/www/*.js out and placed them inside ./www/plugin/file.js. This allows me to modify them as I work and ionic serve picks them up. From here, gulp takes over.
gulp.task('plugin-overwrite', function() {
// Step 1: Move the edited files back into the plugin folder
gulp.src('./www/plugin/file.js')
.pipe(gulp.dest('./plugins/com.plugin/src/browser/'));
// Step 2: Build the project
if (sh.exec('ionic build browser').code !== 0) {
console.log('Failed to build for browser');
process.exit(1);
}
// Step 3: Move built files back into webroot
gulp.src(['./platforms/browser/www/cordova.js', './platforms/browser/www/cordova_plugins.js'])
.pipe(gulp.dest('./www/build/'));
gulp.src('./platforms/browser/www/plugins')
.pipe(gulp.dest('./www/build/'));
});
Then my index.html manually includes ./www/build/cordova.js which loads the plugins out of ./www/build/plugins/...
If anyone has any better ideas please let me know.
any news about it?
any news about it? X2
Hello,
I'm new to ionic and it's been a wonderful experience except for the fact that I lost several hours completely stuck thanks to this issue. The 'ionic serve' experience is great and it's not at all obvious that you don't have access to cordova plugins, nor to 'cordova' itself, in this environment.
Any news (X3) on fixing this? It has caused headaches for lots of people already (cf. Wizcorp/phonegap-facebook-plugin#866, ionic-team/ng-cordova#446, http://stackoverflow.com/questions/27906239/facebookconnectplugin-is-not-defined-ngcordova-ionic-app, etc.) and fixing it will be critical to maintaining the otherwise high quality of the ionic experience.
Thank you.
any news about it? X4
here, problems with phonegap-facebook-plugin
+1
+1
+1
At this moment we solved this issue by generating a Gulp command that serves the platforms/browser/www directory. You should manually build for browser each time you make a change (ionic build browser):
gulp.task('browser:serve', function() {
gulp.src(paths.browser)
.pipe(webserver({
livereload: {enable: true, port: 35729},
directoryListing: false,
host: localhost,
port: 8100,
open: true
}));
});+1
+1
+1
workaround in #790
Having similar problems when using phonegap-facebook-plugin. Would also like to know if possible to resolve this when doing 'ionic serve'
+1
+1
+1
+1
+1
+1
+1
+1
+1
+1
+1
Facing the same issue with ionic serve. Hope this gets resolved soon. ionic run browser works for me though
- 1
+1
I'm experiencing this issue as well, and it really sucks that ionic run browser --livereload does not work either..
Is there anyone on the Ionic team that is looking into this?? I haven't seen anyone from them comment on this yet.
Throwing another +1 onto the heap
+1
This is really horrible... can you at least throw some log that that's the problem?
Wasted a whole day on this...
If I do a ionic build browser, I noticed that the cordova.js and it's dependencies get built to /platforms/browser/cordova/platform_www. The question is (maybe), how do we get that output via WebPack to get generated to /www? Would LOVE to know the answer to that.
as mark-veenstra already wrote - but let me fix the port from 8100 -> 8000 which is the port the "ionic run browser" works:
add this to your gulp file under the other tasks:
gulp.task('browser:serve', function() {
gulp.src(paths.browser)
.pipe(webserver({
livereload: {enable: true, port: 35729},
directoryListing: false,
host: localhost,
port: 8000,
open: true
}));
});
ionic run browser --live-reload throws Error loading cordova-browser for me. Does anybody knows something about this
@lordprettyflacko I get that as well but am able to build and serve for browser (pulling in all js and hooks) with ionic build browser --desktop --testing && http-server platforms/browser/www/
@joshuaohana i tried this but my system cant find the http-server command. However it works for me now with ionic serve browser. I dont know why cause i tried so much thing but in the end it works.
What I have done as a hacky workaround for the time being is just do an ionic build browser and then I copy the platform_www folder from the platforms/browser directory into my www folder and then I reference it inside my index.html with <script src="platform_www/cordova.js"></script>. After doing that my ionic serve will then load all my cordova browser plugins.. (Works 90% of the time, i usually just refresh my page if the plugins don't load on initial startup.)
ionic build browser- copy
platforms/browser/platform_wwwfolder towwwfolder - add
<script src="platform_www/cordova.js"></script>toindex.html ionic serve(refresh page if plugins don't load at first.)
By using "ionic run browser --livereload" command I can see the trigger is active:
"HTML changed: www\index.html"
however we need to run a command to compile our changes:
cordova prepare browser
I hope someone can fix it ASAP.
+1 Same here
After inspecting my node_modules/@ionic/app-scripts/dist/serve.js
I've managed to come up with this change in the package.json's npm script for ionic:serve =>
"ionic:serve": "ionic-app-scripts serve --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build"
This makes my ionic serve use the browser platform as it's basis and all the good stuff is there provided by serve out of the box (all that I need anyway, didn't check everything).
My only issue at present is kind of unrelated, the splash screen plugin requests img/logo.png while this doesn't seem to exist under my root www of platforms/browser/www/.
My logo.png is in the src/assets directory, it would be cool if that got copied over but this may very well be a splash screen plugin issue instead of something to be done on ionic's side.
At the meantime you can use the following in order to use cordova contacts plugin in ionic serve:
https://github.com/meirotstein/cordova-plugin-contacts-mock
@petermetz That is a GREAT solution. Working perfectly for me. Thank you!
Slight mod - I like having source maps built:
"ionic:serve": "ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build"
@petermetz Epic solution, thank you!
To the unrelated issue img/logo.png 404, I solved it by customizing ionic-app-scripts/config/copy.config.js. You can provide your own copy.config.js:
// <projectRoot>/copy.config.js
const defaultConfig = require('@ionic/app-scripts/config/copy.config');
module.exports = Object.assign({}, defaultConfig, {
copyLogo: {
src: 'platforms/browser/img/logo.png',
dest: '{{WWW}}/img',
},
});So in your case, you should be able to use {{SRC}}/assets/logo.png as the src.
If you're not already using an extended config like this, note that you also have to add:
// ...
"config": {
"ionic_copy": "copy.config.js"
}
// ...to your package.json and it works properly from @ionic/app-scripts": "^0.0.48 - other configs work, but a bug specific to copy.config was fixed in this version.
@petermetz your solution won't work when using azure mobile client plugin. anybody has any idea for a workaround?