Ionic Native 3.x Browser usage

Ionic Framework ionic-v3
1

Is there a way to configure app.module to replace the native providers with the mock class only when ran in the browser? The browser development support has made a huge impact on the time it takes for us to develop our BLE app, but at the moment we manually set the provider every time we are going to build to a mobile unit instead of testing in the browser.

1 Like
2

Iā€™m going to be writing a tutorial on this shortly, but this is what I am doing (added an app.providers.ts file):

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AppProviders } from './app.providers';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: AppProviders.getProviders()
})
export class AppModule {}

app.providers.ts

import { ErrorHandler } from '@angular/core';
import { IonicErrorHandler } from 'ionic-angular';
import { Camera } from '@ionic-native/camera';

class CameraMock {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_ENCODED_DATA_GOES_HERE");
    })
  }
}

export class AppProviders {

	public static getProviders() {

		let providers;

		if(document.URL.includes('https://') || document.URL.includes('http://')){

		  // Use browser providers
		  providers = [
		    {provide: Camera, useClass: CameraMock},
		    {provide: ErrorHandler, useClass: IonicErrorHandler}
		  ];

		} else {
		  
		  // Use device providers
		  providers = [
		    Camera,
		    {provide: ErrorHandler, useClass: IonicErrorHandler}
		  ];  

		}

		return providers;

	}

}

EDIT: I have a repository here: https://github.com/joshuamorony/ionic2-native-mock-detect/blob/master/src/app/app.module.ts will be writing the tutorial shortly

4 Likes
3

Thank you! I am looking forward to reading the tutorial when it comes out as well :slight_smile: