gl-ionic2-env-configuration
v0.0.18
Published
An Ionic2 Service to load an environment specific configuration before everything else
Downloads
32
Readme
#Introduction This is an environment configuration package for Ionic2. It allows you to dynamically load a json configuration file at the root of your app (www). This json will be loaded before everything else in your App.
#Usecase For example, in a continuous integration system, we often need different API endpoints between developpment, preproduction, production and so on. This system will allow you to change this kind of parameter in the configuration file without having to recompile your Typescript code all over.
#Example
To make it simpler, this repository contains a test-app
folder which follows the "How to use it section".
So if you prefer reading the code, go ahead!
#How to use it
##Install the module Install it with npm:
npm install gl-ionic2-env-configuration --save
##Create or copy your configuration json file
###Simple way
Add a env-configuration.json
file in your www
folder containing your env configuration variables.
There is no required key needed, it's your configuration. It will surely contain your api url, your Google Analytics ID and more...
To copy the right configuration for the right environment, you will need a copy executable, as explained in the next section.
###Automatic way (use a copy executable)
I made a simpe executable that will copy the right configuration file for a specified environment:
copy-env-config.js
which is available here.
Here how to use it:
node copy-env-config.js --env YOURENV
This will copy the file src/env-configuration/YOURENV.json
to www/env-configuration.json
###Even more automatic
Just run this command before your ionic:serve or ionic:build command to specify the right environment configuration to copy.
For example, to build you app in prod and serve in dev, just update your package.json
scripts like that:
"ionic:build": "node copy-env-config.js --env prod | ionic-app-scripts build",
"ionic:serve": "node copy-env-config.js --env dev | ionic-app-scripts serve"
##Use the module in your Ionic 2 app
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
// Import the module
import { GLIonic2EnvConfigurationModule } from 'gl-ionic2-env-configuration';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp),
GLIonic2EnvConfigurationModule // Import the module here
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: []
})
export class AppModule {}
##Get the configuration in your app
import { Component } from '@angular/core';
// Import the module
import {EnvConfigurationProvider} from "gl-ionic2-env-configuration";
// Import your configuration typings
// You can specify a typing for your configuration to get nice and neat autocompletion
import {ITestAppEnvConfiguration} from "../../env-configuration/ITestAppEnvConfiguration";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// inject the EnvConfigurationProvider and specify the configuration typings
constructor(private envConfiguration: EnvConfigurationProvider<ITestAppEnvConfiguration>) {
let config: ITestAppEnvConfiguration = envConfiguration.getConfig();
console.log(config); // And here you have your nice configuration
}
}
##How it works
This modules uses a specific way to load the EnvConfigurationProvider
which basically tells Angular to wait for this provider to load the configuration json file before loading the rest.
So for example, your API service will have the right endpoint even in its constructor.
To learn more about this specific loading, you can see this discussion and this GIST file.