How to create configuration for development and production builds


Hey there,

Within an Ionic 2 app, is it possible to provide a configuration file that can be injected into my application with difference values for a development vs a production build?

AKA, within a component I could have:

import { Component } from '@angular/core';
import { CustomConfig } from 'ionic-angular';

  selector: 'my-component',
  templateUrl: 'my-component.html'
export class MyComponent {

    private config: CustomConfig
  ) {


And my custom config file could be something down the lines of:

  $development: {
    databaseUrl: 'http://localhost:4567'
  $production: {
    databaseUrl: ''

Then when I’m developing with ionic serve it would use the $development configuration and when building with ionic build ios --prod it would use the $production configuration.

Is this built in by default?


there is nothing build in like this, yet.

Follow up this discussion - there are some workarounds mentioned


This may work for you. I check value of window.location.hostname

If its localhost - that generally means its dev… haven’t tested apps via cordova though, but good enough for Ionic Dec dev (e.g. ionic serve) vs public websevers