@gceduvieira
Quite a bit has changed in the build process since I posted this. I am still using a similar setup, but it is a little different now using Ionic 2/3 release.
I create two configuration files, /config/production/config.ts and /config/development/config.ts. There is no config folder in the root of a ionic project, so you will need to create those folders along with the two environment subfolders. Next create a folder in /src called config so you end up with the structure /src/config/. Now will have added three new folders.
Next add a .gitignore file inside of /src/config/. Create two more files /config/production.js, and /config/development.js
/config/production.js
var fs = require('fs-extra');
var path = require('path');
console.log('Copying production environment configuration');
fs.copy(path.join(__dirname, 'production', 'config.ts'), path.join(__dirname, '..', 'src', 'config', 'config.ts'), function(err){
if (err) {
console.log('Error while copying production configuration');
return console.log(err);
}
});
/config/development.js
var fs = require('fs-extra');
var path = require('path');
console.log('Copying development environment configuration');
fs.copy(path.join(__dirname, 'development', 'config.ts'), path.join(__dirname, '..', 'src', 'config', 'config.ts'), function(err){
if (err) {
console.log('Error while copying development configuration');
return console.log(err);
}
});
/config/development/config.ts
import { Injectable } from '@angular/core';
@Injectable()
export class AppConfig {
public prodMode: Boolean = false;
public apiBaseUrl: String = '';
public googleAnalyticsId: String = '';
public loginDefaultEmail: String = '';
public loginDefaultPassword: String = '';
public supportEmail: String = '';
public googleApiKey: String ='';
}
/config/production/config.ts
import { Injectable } from '@angular/core';
@Injectable()
export class AppConfig {
public prodMode: Boolean = true;
public apiBaseUrl: String = 'http://your-api-url.com';
public googleAnalyticsId: String = '';
public loginDefaultEmail: String = '';
public loginDefaultPassword: String = '';
public supportEmail: String = '';
public googleApiKey: String ='';
}
You need to import the config into your /src/app/app.module.ts file.
import { AppConfig } from '../config/config';
// Add to providers array
providers: [
AppConfig,
... Your other providers ...
]
If you are running Mac or Linux, you may want to run chmod +x /config/production.js to make the scripts executable. Now we need to add two lines to your package.json that will handle automatically copying the environment config file.
package.json
// Add to your scripts object
scripts: {
"ionic:build:before": "node ./config/production.js",
"ionic:watch:before": "node ./config/development.js"
}
Now whenever you run ionic serve it will copy the development config.ts file into the web browser, and running ionic cordova build <platform> it will copy the production config.ts file into the app. I then have ignored changes to /src/config/config.ts as it will change based on the environment I am targeting. I am also importing the AppConfig module into my providers. I create a baseUrl property in provider like:
import { AppConfig } from '../../config/config';
@Injectable()
class AuthProvider
{
public baseUrl: string;
constructor(public appConfig: AppConfig, public http: Http)
{
this.baseUrl = this.appConfig.apiBaseUrl + '/auth';
}
login(credentials: {email: string, password: string}): Observable
{
return this.http.post(this.baseUrl + '/login', credentials).map( res => res.json() );
}
}
Using this you can easily use different domains for testing and production.
I did what