Angular 2: How to handle app configuration for different environments
You could define a dedicated provider provided these hints. Something like that:
bootstrap(AppComponent, [
(...)
provide('configuration', {
useValue: {
apiBaseUrl: 'http://localhost:4000'
}
}
]);
When you package your code for production, you can replace the file containing this code with the one with the configuration for production.
To take into account this configuration, you can extend the RequestOptions
class to prefix all your request with the apiBaseUrl
prefix:
import {
BaseRequestOptions, RequestOptions, RequestOptionsArgs
} from 'angular2/http';
export class AppRequestOptions extends BaseRequestOptions {
constructor(private @Inject('configuration') configuration:any) {
}
merge(options?:RequestOptionsArgs):RequestOptions {
options.url = this.configuration.apiBaseUrl + options.url;
return super.merge(options);
}
}
Don't forget to configure the request options when bootstrapping your application:
bootstrap(AppComponent, [
(...)
provide('configuration', {
useValue: {
apiBaseUrl: 'http://localhost:4000'
}
}
provide(RequestOptions, { useClass: AppRequestOptions })
]);
This processing could be contained into a dedicated JS file that would be replaced within the build (with gulp and gulp-html-replace for example).
See this question:
- How do I actually deploy an Angular 2 + Typescript + systemjs app?
For the last step, you could also load asynchronously the application based on a configuration file:
var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
var http = injector.get(Http);
http.get('config.json').map(res => res.json())
.subscribe(data => {
bootstrap(AppComponent, [
HTTP_PROVIDERS
provide('config', { useValue: data })
]);
});
See this question for more details:
- How to bootstrap an Angular 2 application asynchronously