Angular: Set default headers on each request

Today I was discussing with a colleague what’s the best options to always set some header data for your HTTP requests. Here is my solution…

Create a new TypeScript class that inherits from BaseRequestOptions:

	import {Injectable, Inject, LOCALE_ID} from '@angular/core';
	import {RequestOptions, BaseRequestOptions} from '@angular/http';
	@Injectable()
	export class DefaultRequestOptions extends BaseRequestOptions {
	constructor(@Inject(LOCALE_ID) locale: string) {
	super();
	// Set the default 'Content-Type' header
	this.headers.set('Content-Type', 'application/json');
	this.headers.set('Accept', 'application/json');
	this.headers.set('Accept-Language', locale ? locale : 'nl-BE');
	this.headers.set('X-Requested-By', 'My-App');
	}
	}

view raw DefaultRequestOptions.ts hosted with ❤ by GitHub

Note: In this example I injected a LOCALE_ID to capture the culture set in the application.

Next step is to create a provider that replaces the default RequestOptions:

export const RequestOptionsProvider = {provide: RequestOptions, useClass: DefaultRequestOptions};

view raw RequestOptionsProvider.ts hosted with ❤ by GitHub

Last step is to register the DefaultRequestOptionsProvider in your module:

	import { NgModule, LOCALE_ID } from '@angular/core';
	import { HttpModule } from '@angular/http';
	import { RequestOptionsProvider } from './helpers/default-request-options';
	@NgModule({
	declarations: [
	],
	imports: [
	HttpModule,
	RouterModule
	],
	providers: [
	RequestOptionsProvider
	],
	bootstrap: [AppComponent],
	})
	export class AppModule {
	}

view raw app.module.ts hosted with ❤ by GitHub