ionic-cli: ionic serve doesn't support cordova browser plugins

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.

This is really horrible… can you at least throw some log that that’s the problem? Wasted a whole day on this…

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.

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.)

1. ionic build browser
2. copy platforms/browser/platform_www folder to www folder
3. add <script src="platform_www/cordova.js"></script> to index.html
4. ionic serve (refresh page if plugins don’t load at first.)

Throwing another +1 onto the heap

• 1

With ionic 4 this can be done with:

$ ionic cordova build browser
$ ionic serve --cordova --platform browser

see: https://github.com/ionic-team/ionic-cli/issues/3043

@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"

@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/

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 Same here

+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.

Facing the same issue with ionic serve. Hope this gets resolved soon. ionic run browser works for me though

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. https://github.com/Wizcorp/phonegap-facebook-plugin/issues/866, https://github.com/driftyco/ng-cordova/issues/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.