Ionic 2 - Build Configuration-Specific Settings

May 12, 2016 archive

In an Ionic 2 app that I’m building for iOS and Android, I want to use different application settings for different build configurations. Let’s see how this can be achieved in Ionic 2.

One reason that I want to be able to use different settings for different configurations, is that I want to be able to use different api endpoints for development and production apps, disable tracking for dev apps, disable logging for production apps etc.

Before we start, I want to be clear that I haven’t read through the massive amount of information out there for Ionic 1 & 2, ES6, TypeScript, Angular 1 & 2 etc. If a better approach exists, please let me know.

Step 1 - Create application settings classes

I want the app to have a default configuration that is shared by all build configs, then be able to override any settings and add new ones when switching configuration.

As such, I have a base class that defines most settings:

// app/config/app-settings-base

export class AppSettingsBase {
  public apiUrl: string;
  public rssFeedUrl: string;

  constructor() {
     this.apiUrl = '';
     this.rssFeedUrl = 'http://rssdomain.com/rss.xml';
  }
}

This class defines an rss feed url, but leaves the api url blank. This means that each build configuration can define a custom rss feed value to override this default value, but doesn’t have to. However, it must define a specific api url.

Note that the class isn’t injectable. This means that it can’t be injected into components in the app. For that, we will use build configuration-specific settings classes.

Let’s start off with the settings class that I will use for development:

// app/config/app-settings-debug

import {Injectable} from "angular2/core";
import {AppSettingsBase} from "../config/app-settings-base";

@Injectable()
export class AppSettings extends AppSettingsBase {
  constructor() {
    super();
    this.apiUrl = 'Debug API';
  }
}

This file contains an AppSettings class that inherits AppSettingsBase and sets a debug-specific value for the apiUrl property. This class is injectable, which means that we can use it in our app.

Let’s add a second settings class, that will be used for release builds:

// app/config/app-settings-release

import {Injectable} from "angular2/core";
import {AppSettingsBase} from "../config/app-settings-base";

@Injectable()
export class AppSettings extends AppSettingsBase {
  constructor() {
    super();
    this.apiUrl = 'Release API';
  }
}

This file also contains an injectable AppSettings class that also inherits AppSettingsBase (you will only use one though), then sets a release-specific value for the apiUrl property.

Step 2 -Use Gulp to apply the correct settings class

We will now use Gulp to apply the correct application settings file when serving and building the app.

First, add "gulp-rename" : "1.2.2" (or later) to your package.json file. Then, require the file topmost in your gulpfile.js, like this:

rename = require('gulp-rename'),

After that, add the following build task to gulpfile.js:

gulp.task('copy-settings', function () {
  var settingsFileSuffix = isRelease ? 'release' : 'debug';
  var pathPrefix = 'app/config/app-settings-';
  return gulp
    .src(pathPrefix + settingsFileSuffix + '.ts')
    .pipe(rename('app-settings.ts'))
    .pipe(gulp.dest('app/config/'));
});

Finally, refer to this task in serve:before and build:

gulp.task('serve:before', ['watch', 'copy-settings']);

gulp.task('build', ['clean', 'copy-settings'], function(done) {

If we now run ionic serve or ionic build, gulp will generate a copy of app-settings-debug.ts in app-settings.ts. If you add --release to the command, gulp will use app-settings-release.ts instead.

You could easily extend this functionality to support more build configurations. Just follow the same approach as above.

Step 3 - Use the resulting settings class

We now have a configuration-specific file generated every time we build or serve the app. Since the file is auto-created, you should add app/config/app-settings.ts to .gitignore, if you have one. We don’t need to commit it every time it is changed.

You can now use the resulting settings class as normal. For instance, to verify that the correct settings file is applied, add the following to your app.ts file:

import {AppSettings} from './config/app-settings';

...

@App({
  ...
  providers: [PodcastService, AppSettings]
})
  export class MyApp {
    ...
    constructor(platform: Platform, settings: AppSettings) {
       console.log(settings.apiUrl);
       ...
  }
}

If things work as expected, you will see different output when you build for development and for release.