# Injecting mock providers only for dev mode

**URL:** <https://forum.ionicframework.com/t/injecting-mock-providers-only-for-dev-mode/131434>\
**Category:** ionic-v3\
**Created:** [May 26, 2018, 5:11pm UTC](https://forum.ionicframework.com/t/injecting-mock-providers-only-for-dev-mode/131434 "2018-05-26T17:11:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![arctican](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arctican/32/119649_2.png) [@arctican](https://forum.ionicframework.com/u/arctican)\
**Post date:** [May 26, 2018, 5:11pm UTC](https://forum.ionicframework.com/t/injecting-mock-providers-only-for-dev-mode/131434/1 "2018-05-26T17:11:15Z")

</div>

Hello.

I’ve created a couple of mock classes for testing in the browser. When testing on a device, I manually remove these from the providers list before the build. I now want to automatically include or remove them based on the `--prod` flag.

I have tried various methods, from webpack config, to environment variables, to custom services. In other parts of the app, I use `isDevMode()` as a quick getter to change some variables. The trouble is that `isDevMode()` can’t be called before `enableProdMode()` which appears to be after the main module is set up.

I would like to conditionally add an array of mock providers to the provider list such as:

```
const mockProviders = [
    { provide: Camera, useClass: CameraMock },
    { provide: Geolocation, useClass: LocationMock },
];

@NgModule({
    providers: [
    	commonProviders,
    	isDevMode() ? mockProviders : []
    ],
    ....

```

Is there a simple way to do this?

Cheers

---

<div class="post-metadata">

**Author:** ![arctican](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arctican/32/119649_2.png) [@arctican](https://forum.ionicframework.com/u/arctican)\
**Post date:** [May 26, 2018, 5:26pm UTC](https://forum.ionicframework.com/t/injecting-mock-providers-only-for-dev-mode/131434/2 "2018-05-26T17:26:38Z")

</div>

I’ve been racking my brain for days to do this cleanly. Tried loads of different examples, and I’ve just managed to solve this, so I’ll post my solution here:

I followed the guide here to set environment variables: [https://github.com/gshigeto/ionic-environment-variables](https://github.com/gshigeto/ionic-environment-variables)

I modified the `ENV` to have a `isDevMode`:

```
export const ENV = {
	mode: 'Production',
	isDevMode: false
}

```

Before declaring the app module:

```
import { ENV } from '@app/env';
let isDev = ENV.isDevMode;

```

And in my providers:

```
providers: [
		commonProviders,
    	isDev ? mockProviders : []
	]

```

Hope that can help others!

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [May 26, 2018, 11:03pm UTC](https://forum.ionicframework.com/t/injecting-mock-providers-only-for-dev-mode/131434/3 "2018-05-26T23:03:45Z")

</div>

> [@arctican](#):
>
> I’ve created a couple of mock classes for testing in the browser.

```auto
export interface EnvInterface {

  production: boolean;

  firebase: {
    apiKey: string,
    authDomain: string,
    databaseURL: string,
    projectId: string,
    storageBucket: string,
    messagingSenderId: string
  };

}

export const ENV: EnvInterface = {

  production: false,

  firebase: {
    ...
  }

};

```

```auto
import { ENV } from '@env';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    IonicModule,
    AngularFireModule.initializeApp(ENV.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    LocalStorageModule,
    // ENV.production ? ServiceWorkerModule.register('/ngsw-worker.js') : []
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: ENV.production }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [],
  declarations: [],
  providers: [
    AuthService,
    ENV.production ? { provide: ErrorHandler, useClass: BrewErrorHandler } :
      { provide: ErrorHandler, useClass: IonicErrorHandler},
    { provide: LoggerService, useClass: ConsoleLoggerService },
    ...
  ]
})
export class CoreModule {
  constructor( @Optional() @SkipSelf() parentModule: CoreModule,
               private translate: TranslateService,
               private afs: AngularFirestore) {

    throwIfAlreadyLoaded(parentModule, 'CoreModule');

    translate.setDefaultLang('en');

    const settings = { timestampsInSnapshots: true };
    afs.app.firestore().settings(settings);
  }
}

```

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [May 27, 2018, 12:04am UTC](https://forum.ionicframework.com/t/injecting-mock-providers-only-for-dev-mode/131434/4 "2018-05-27T00:04:09Z")

</div>

[https://blog.ionicframework.com/ionic-native-mocks/](https://blog.ionicframework.com/ionic-native-mocks/)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:34pm UTC](https://forum.ionicframework.com/t/injecting-mock-providers-only-for-dev-mode/131434/5 "2021-07-19T21:34:46Z")

</div>

Closed on July 19, 2021, 9:34pm UTC