# Ionic Native 3.x Browser usage

**URL:** <https://forum.ionicframework.com/t/ionic-native-3-x-browser-usage/84259>\
**Category:** ionic-v3\
**Created:** [March 26, 2017, 8:41am UTC](https://forum.ionicframework.com/t/ionic-native-3-x-browser-usage/84259 "2017-03-26T08:41:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nornes](https://avatars.discourse-cdn.com/v4/letter/n/7ea924/32.png) [@nornes](https://forum.ionicframework.com/u/nornes)\
**Post date:** [March 26, 2017, 8:41am UTC](https://forum.ionicframework.com/t/ionic-native-3-x-browser-usage/84259/1 "2017-03-26T08:41:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joshmorony](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joshmorony/32/117695_2.png) [@joshmorony](https://forum.ionicframework.com/u/joshmorony)\
**Post date:** [March 27, 2017, 3:20am UTC](https://forum.ionicframework.com/t/ionic-native-3-x-browser-usage/84259/2 "2017-03-27T03:20:39Z")

</div>

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**

```auto
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**

```auto
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](https://github.com/joshuamorony/ionic2-native-mock-detect/blob/master/src/app/app.module.ts) will be writing the tutorial shortly

---

<div class="post-metadata">

**Author:** ![nornes](https://avatars.discourse-cdn.com/v4/letter/n/7ea924/32.png) [@nornes](https://forum.ionicframework.com/u/nornes)\
**Post date:** [March 27, 2017, 7:04am UTC](https://forum.ionicframework.com/t/ionic-native-3-x-browser-usage/84259/3 "2017-03-27T07:04:56Z")

</div>

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