Angular - リクエストごとにヘッダを設定する
ユーザーがログインした後、後続のすべての要求に対してAuthorizationヘッダーを設定する必要があります。
特定のリクエストに対してヘッダを設定するには、
import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);
// HTTP POST using these headers
this.http.post(url, data, {
headers: headers
})
// do something with the response
しかし、この方法ですべてのリクエストに対してリクエストヘッダーを手動で設定することは現実的ではありません。
ユーザーがログインした後に設定されたヘッダーを設定し、ログアウト時にそれらのヘッダーを削除する方法
答えるには、Angularの元のHttpオブジェクトをラップするサービスを提供できるかと疑問に思います。以下に説明するようなもの。
import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
@Injectable()
export class HttpClient {
constructor(private http: Http) {}
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' +
btoa('username:password'));
}
get(url) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get(url, {
headers: headers
});
}
post(url, data) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.post(url, data, {
headers: headers
});
}
}
そして、Httpオブジェクトを注入する代わりに、このオブジェクト（HttpClient）を注入できます。
import { HttpClient } from './http-client';
export class MyComponent {
// Notice we inject "our" HttpClient here, naming it Http so it's easier
constructor(http: HttpClient) {
this.http = httpClient;
}
handleSomething() {
this.http.post(url, data).subscribe(result => {
// console.log( result );
});
}
}
また、Httpクラスを拡張する独自のクラスを提供することにより、Httpクラスのマルチプロバイダーを使用して何かができると思います...このリンクを参照してください： http：//blog.thoughtram .io/angular2/2015/11/23/multi-providers-in-angular-2.html 。
HTTPインターセプターは@angular/common/httpからの新しい HttpClient を介して 現在利用可能 になります Angular 4.3.x以降のバージョン以降 .
リクエストごとにヘッダを追加するのはとても簡単です。
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
} from '@angular/common/http';
export class AddHeaderInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header
const clonedRequest = req.clone({ headers: req.headers.set('Authorization', 'Bearer 123') });
// Pass the cloned request instead of the original request to the next handle
return next.handle(clonedRequest);
}
}
そこに 不変の原則 があります、それはそれに何か新しいものを設定する前に要求が複製される必要がある理由です。
ヘッダの編集は非常に一般的な作業なので、実際にはショートカットがあります（リクエストの複製中）。
const clonedRequest = req.clone({ setHeaders: { Authorization: 'Bearer 123' } });
インターセプターを作成したら、HTTP_INTERCEPTORS提供を使用してそれを登録する必要があります。
import { HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: AddHeaderInterceptor,
multi: true,
}],
})
export class AppModule {}
このシナリオでは、BaseRequestOptionsを拡張することが非常に役立ちます。次のコードをチェックしてください。
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, Headers, Http, BaseRequestOptions} from 'angular2/http';
import {AppCmp} from './components/app/app';
class MyRequestOptions extends BaseRequestOptions {
constructor () {
super();
this.headers.append('My-Custom-Header','MyCustomHeaderValue');
}
}
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: MyRequestOptions })
]);
これはすべての呼び出しに 'My-Custom-Header'を含める必要があります。
更新：
上記のコードの代わりに必要なときにいつでもヘッダーを変更できるようにするには、次のコードを使用して新しいヘッダーを追加することもできます。
this.http._defaultOptions.headers.append('Authorization', 'token');
削除することができます
this.http._defaultOptions.headers.delete('Authorization');
値を設定するために使用できる別の関数もあります。
this.http._defaultOptions.headers.set('Authorization', 'token');
上記の解決策は、TypeScriptのコンテキストではまだ完全には有効ではありません。 _defaultHeadersは保護されており、このようには使用されません。私は上記の解決策を素早く修正するためにお勧めしますが、長い目で見ればauthを扱うhttp呼び出しの周りにあなた自身のラッパーを書くことがより良いです。以下のauth0の例を参考にしてください。
https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts
アップデート - 2018年6月 私はこの解決策を求める人がたくさんいるのを見ていますが、そうでなければお勧めします。グローバルにヘッダーを追加すると、アプリから発信されるevery api呼び出しに認証トークンが送信されます。そのため、インターコムやzendeskなどのサードパーティ製プラグインに送信されるAPI呼び出しやその他のAPIにも認証ヘッダーが含まれます。これは大きなセキュリティ上の欠陥につながるかもしれません。 代わりに、インターセプターをグローバルに使用しますが、発信呼び出しがサーバーのAPIエンドポイントに向けられているかどうかを手動で確認してから、認証ヘッダーを添付します。
私は非常に遅くそれに答えていますが、それは他の誰かを助けるかもしれませんが。 @NgModuleが使用されているときにすべてのリクエストにヘッダーを挿入するために、以下を実行できます。
（私はこれをAngular 2.0.1でテストしました）
/**
* Extending BaseRequestOptions to inject common headers to all requests.
*/
class CustomRequestOptions extends BaseRequestOptions {
constructor() {
super();
this.headers.append('Authorization', 'my-token');
this.headers.append('foo', 'bar');
}
}
今@NgModuleで以下を行います：
@NgModule({
declarations: [FooComponent],
imports : [
// Angular modules
BrowserModule,
HttpModule, // This is required
/* other modules */
],
providers : [
{provide: LocationStrategy, useClass: HashLocationStrategy},
// This is the main part. We are telling Angular to provide an instance of
// CustomRequestOptions whenever someone injects RequestOptions
{provide: RequestOptions, useClass: CustomRequestOptions}
],
bootstrap : [AppComponent]
})
Angular 2.1.2では、角度Httpを拡張してこれに取り組みました。
import {Injectable} from "@angular/core";
import {Http, Headers, RequestOptionsArgs, Request, Response, ConnectionBackend, RequestOptions} from "@angular/http";
import {Observable} from 'rxjs/Observable';
@Injectable()
export class HttpClient extends Http {
constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {
super(_backend, _defaultOptions);
}
_setCustomHeaders(options?: RequestOptionsArgs):RequestOptionsArgs{
if(!options) {
options = new RequestOptions({});
}
if(localStorage.getItem("id_token")) {
if (!options.headers) {
options.headers = new Headers();
}
options.headers.set("Authorization", localStorage.getItem("id_token"))
}
return options;
}
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
options = this._setCustomHeaders(options);
return super.request(url, options)
}
}
それから私のApp Providersでは、私は 'Http'を提供するためにカスタムFactoryを使うことができました
import { RequestOptions, Http, XHRBackend} from '@angular/http';
import {HttpClient} from './httpClient';
import { RequestOptions, Http, XHRBackend} from '@angular/http';
import {HttpClient} from './httpClient';//above snippet
function httpClientFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {
return new HttpClient(xhrBackend, requestOptions);
}
@NgModule({
imports:[
FormsModule,
BrowserModule,
],
declarations: APP_DECLARATIONS,
bootstrap:[AppComponent],
providers:[
{ provide: Http, useFactory: httpClientFactory, deps: [XHRBackend, RequestOptions]}
],
})
export class AppModule {
constructor(){
}
}
今、私はすべてのHttpメソッドを宣言する必要はなく、私のアプリケーションを通して普通にhttpを使うことができます。
Angular 2 Httpプロバイダを拡張してカスタムHttpクラスを作成し、カスタムHttpクラスのconstructorおよびrequestメソッドをオーバーライドするだけです。以下の例はすべてのhttpリクエストにAuthorizationヘッダを追加します。
import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class HttpService extends Http {
constructor (backend: XHRBackend, options: RequestOptions) {
let token = localStorage.getItem('auth_token'); // your custom token getter function here
options.headers.set('Authorization', `Bearer ${token}`);
super(backend, options);
}
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
let token = localStorage.getItem('auth_token');
if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
// let's make option object
options = {headers: new Headers()};
}
options.headers.set('Authorization', `Bearer ${token}`);
} else {
// we have to add the token to the url object
url.headers.set('Authorization', `Bearer ${token}`);
}
return super.request(url, options).catch(this.catchAuthError(this));
}
private catchAuthError (self: HttpService) {
// we have to pass HttpService's own instance here as `self`
return (res: Response) => {
console.log(res);
if (res.status === 401 || res.status === 403) {
// if not authenticated
console.log(res);
}
return Observable.throw(res);
};
}
}
それからXHRBackendをConnectionBackendプロバイダーとして、そしてRequestOptionsをあなたのカスタムHttpクラスに提供するようにメインのapp.module.tsを設定してください：
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
imports: [..],
providers: [
{
provide: HttpService,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpService(backend, options);
},
deps: [XHRBackend, RequestOptions]
}
],
bootstrap: [ AppComponent ]
})
その後、あなたは今あなたのサービスであなたのカスタムhttpプロバイダを使うことができます。例えば：
import { Injectable } from '@angular/core';
import {HttpService} from './http.service';
@Injectable()
class UserService {
constructor (private http: HttpService) {}
// token will added automatically to get request header
getUser (id: number) {
return this.http.get(`/users/${id}`).map((res) => {
return res.json();
} );
}
}
これが包括的なガイドです - http://adonespitogo.com/articles/angular-2-extending-http-provider/ /
絶対に遅れることはありません... =）
あなたは拡張BaseRequestOptions（ここから https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ）の概念を取り入れて、ヘッダを「その場で」（コンストラクタ内だけではなく）このようにgetter/setter "headers"プロパティの上書きを使うことができます。
import { Injectable } from '@angular/core';
import { BaseRequestOptions, RequestOptions, Headers } from '@angular/http';
@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions {
private superHeaders: Headers;
get headers() {
// Set the default 'Content-Type' header
this.superHeaders.set('Content-Type', 'application/json');
const token = localStorage.getItem('authToken');
if(token) {
this.superHeaders.set('Authorization', `Bearer ${token}`);
} else {
this.superHeaders.delete('Authorization');
}
return this.superHeaders;
}
set headers(headers: Headers) {
this.superHeaders = headers;
}
constructor() {
super();
}
}
export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };
Angular 5以上では、HttpInterceptorを使ってリクエストとレスポンスの操作を一般化できます。 これにより、重複を避けることができます。
1）共通ヘッダ
2）レスポンス種別の指定
3）問い合わせ依頼
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse,
HttpErrorResponse
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
requestCounter: number = 0;
constructor() {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
responseType: 'json',
setHeaders: {
Authorization: `Bearer token_value`,
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
});
return next.handle(request).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// do stuff with response if you want
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
// do stuff with response error if you want
}
});
}
}
このAuthHttpInterceptorクラスをHttpInterceptorsのプロバイダとして使用できます。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing-module';
import { AuthHttpInterceptor } from './services/auth-http.interceptor';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthHttpInterceptor,
multi: true
}
],
exports: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
以下は、Angular 2 final用に更新された、受け入れられた回答の改良版です。
import {Injectable} from "@angular/core";
import {Http, Headers, Response, Request, BaseRequestOptions, RequestMethod} from "@angular/http";
import {I18nService} from "../lang-picker/i18n.service";
import {Observable} from "rxjs";
@Injectable()
export class HttpClient {
constructor(private http: Http, private i18n: I18nService ) {}
get(url:string):Observable<Response> {
return this.request(url, RequestMethod.Get);
}
post(url:string, body:any) {
return this.request(url, RequestMethod.Post, body);
}
private request(url:string, method:RequestMethod, body?:any):Observable<Response>{
let headers = new Headers();
this.createAcceptLanguageHeader(headers);
let options = new BaseRequestOptions();
options.headers = headers;
options.url = url;
options.method = method;
options.body = body;
options.withCredentials = true;
let request = new Request(options);
return this.http.request(request);
}
// set the accept-language header using the value from i18n service that holds the language currently selected by the user
private createAcceptLanguageHeader(headers:Headers) {
headers.append('Accept-Language', this.i18n.getCurrentLang());
}
}
もちろん、必要に応じてdeleteやputなどのメソッドにも拡張する必要があります（私のプロジェクトでは、現時点ではまだ必要ありません）。
利点は、get/post/...メソッド内のコードの重複が少ないことです。
私の場合は認証にクッキーを使用しています。私たちのAPIから返される値の多くはユーザーの言語に翻訳されているので、国際化のためのヘッダー（Accept-Languageヘッダー）が必要でした。私のアプリでは、国際化サービスはユーザーが現在選択している言語を保持しています。
いくつかの調査の後、私は最後のそして最も簡単な方法が私が好むBaseRequestOptionsを拡張することであることを発見しました。
以下は、私が試して、何らかの理由であきらめた方法です。
1。 BaseRequestOptionsを拡張し、constructor()に動的ヘッダを追加します。ログインしても動作しません。一度作成されます。だから動的ではありません。
2。 Httpを拡張します。上記と同じ理由で、constructor()に動的ヘッダを追加することはできません。そしてrequest(..)メソッドを書き換えて、ヘッダを設定すると、
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
let token = localStorage.getItem(AppConstants.tokenName);
if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
options = new RequestOptions({});
}
options.headers.set('Authorization', 'token_value');
} else {
url.headers.set('Authorization', 'token_value');
}
return super.request(url, options).catch(this.catchAuthError(this));
}
このメソッドを上書きするだけで十分ですが、すべてのget/post/putメソッドは必要ありません。
3.私の推奨する解決策はBaseRequestOptionsを拡張してmerge()を上書きすることです。
@Injectable()
export class AuthRequestOptions extends BaseRequestOptions {
merge(options?: RequestOptionsArgs): RequestOptions {
var newOptions = super.merge(options);
let token = localStorage.getItem(AppConstants.tokenName);
newOptions.headers.set(AppConstants.authHeaderName, token);
return newOptions;
}
}
このmerge()関数はリクエストごとに呼び出されます。
次のように別のサービスを利用するのはどうですか
import {Injectable} from '@angular/core';
import {Headers, Http, RequestOptions} from '@angular/http';
@Injectable()
export class HttpClientService extends RequestOptions {
constructor(private requestOptionArgs:RequestOptions) {
super();
}
addHeader(headerName: string, headerValue: string ){
(this.requestOptionArgs.headers as Headers).set(headerName, headerValue);
}
}
そして、あなたが他の場所からこれを呼び出すとき、this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);を使います
次のように追加されたヘッダが表示されます。 - Authorization
私はこれに非常に遅く答えていますが誰かがもっと簡単な解決策を求めているならば。
Angular2-jwtを使うことができます。 angular2-jwtは、Angular 2アプリからHTTPリクエストを行うときに、JSON Web Token（JWT）をAuthorizationヘッダーとして自動的に添付するのに便利です。
高度な設定オプションでグローバルヘッダを設定できます
export function authHttpServiceFactory(http: Http, options: RequestOptions) {
return new AuthHttp(new AuthConfig({
tokenName: 'token',
tokenGetter: (() => sessionStorage.getItem('token')),
globalHeaders: [{'Content-Type':'application/json'}],
}), http, options);
}
リクエストごとにトークンを送信する
getThing() {
let myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
this.authHttp.get('http://example.com/api/thing', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
// Pass it after the body in a POST request
this.authHttp.post('http://example.com/api/thing', 'post body', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
}
これが、リクエストごとにトークンを設定するための方法です。
import { RequestOptions, BaseRequestOptions, RequestOptionsArgs } from '@angular/http';
export class CustomRequestOptions extends BaseRequestOptions {
constructor() {
super();
this.headers.set('Content-Type', 'application/json');
}
merge(options?: RequestOptionsArgs): RequestOptions {
const token = localStorage.getItem('token');
const newOptions = super.merge(options);
if (token) {
newOptions.headers.set('Authorization', `Bearer ${token}`);
}
return newOptions;
}
}
そしてapp.module.tsに登録する
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: RequestOptions, useClass: CustomRequestOptions }
],
bootstrap: [AppComponent]
})
export class AppModule { }
デフォルトのオプションを上書きするというアイデアが好きです。これは良い解決策のようです。
しかし、あなたがHttpクラスを拡張しようとしているのであれば。必ず読んでください。
ここでの回答の中には、実際にはrequest()メソッドの誤ったオーバーロードを示しているものがあります。私は自分自身につまずいた。
このソリューションはAngular 4.2.xのrequest()メソッドの実装に基づいていますが、将来的に互換性があるはずです。
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {
ConnectionBackend, Headers,
Http as NgHttp,
Request,
RequestOptions,
RequestOptionsArgs,
Response,
XHRBackend
} from '@angular/http';
import {AuthenticationStateService} from '../authentication/authentication-state.service';
@Injectable()
export class Http extends NgHttp {
constructor (
backend: ConnectionBackend,
defaultOptions: RequestOptions,
private authenticationStateService: AuthenticationStateService
) {
super(backend, defaultOptions);
}
request (url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
if ('string' === typeof url) {
url = this.rewriteUrl(url);
options = (options || new RequestOptions());
options.headers = this.updateHeaders(options.headers);
return super.request(url, options);
} else if (url instanceof Request) {
const request = url;
request.url = this.rewriteUrl(request.url);
request.headers = this.updateHeaders(request.headers);
return super.request(request);
} else {
throw new Error('First argument must be a url string or Request instance');
}
}
private rewriteUrl (url: string) {
return environment.backendBaseUrl + url;
}
private updateHeaders (headers?: Headers) {
headers = headers || new Headers();
// Authenticating the request.
if (this.authenticationStateService.isAuthenticated() && !headers.has('Authorization')) {
headers.append('Authorization', 'Bearer ' + this.authenticationStateService.getToken());
}
return headers;
}
}
名前の衝突を防ぐために、このようにオリジナルのクラスをimport { Http as NgHttp } from '@angular/http';インポートしていることに注意してください。
ここで対処される問題は、
request()メソッドが2つの異なる呼び出しシグネチャを持っているということです。 URLのRequestの代わりにstringオブジェクトが渡されると、Angularはoptions引数を無視します。したがって、どちらの場合も適切に処理する必要があります。
そして、これはオーバーライドされたクラスをDIコンテナに登録する方法の例です：
export const httpProvider = {
provide: NgHttp,
useFactory: httpFactory,
deps: [XHRBackend, RequestOptions, AuthenticationStateService]
};
export function httpFactory (
xhrBackend: XHRBackend,
requestOptions: RequestOptions,
authenticationStateService: AuthenticationStateService
): Http {
return new Http(
xhrBackend,
requestOptions,
authenticationStateService
);
}
そのようなアプローチではHttpクラスを普通に注入することができますが、あなたのオーバーライドされたクラスは代わりに魔法のように注入されます。これにより、アプリケーションの他の部分を変更することなくソリューションを簡単に統合することができます（ポリモーフィズムの動作）。
モジュールメタデータのhttpProviderプロパティにprovidersを追加するだけです。
最も簡単な
config.tsファイルを作成する
import { HttpHeaders } from '@angular/common/http';
export class Config {
url: string = 'http://localhost:3000';
httpOptions: any = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': JSON.parse(localStorage.getItem('currentUser')).token
})
}
}
それであなたのserviceに、config.tsファイルをインポートする
import { Config } from '../config';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class OrganizationService {
config = new Config;
constructor(
private http: HttpClient
) { }
addData(data): Observable<any> {
let sendAddLink = `${this.config.url}/api/addData`;
return this.http.post(sendAddLink , data, this.config.httpOptions).pipe(
tap(snap => {
return snap;
})
);
}
私はそれが最も簡単で安全だったと思います。
私はもっと簡単な解決策を選ぶことができました>あなたのapi get（または他の）関数によってデフォルトのオプションのマージまたはロードに新しいヘッダを追加します。
get(endpoint: string, params?: any, options?: RequestOptions) {
if (!options) {
options = new RequestOptions();
options.headers = new Headers( { "Accept": "application/json" } ); <<<<
}
// [...]
}
もちろん、あなたはこのヘッダをデフォルトのオプションで、あるいはあなたのクラスの中で何でも外部化することができます。 これは、イオンによって生成されたapi.ts @Injectable（）エクスポートクラスAPI {}にあります。
それは非常に速くて、それは私のために働きます。私はjson/ldフォーマットが欲しくありませんでした。
Angular 2.0.1以降でいくつかの変更がありました。
import {RequestOptions, RequestMethod, Headers} from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
//you can move this class to a better place
class GlobalHttpOptions extends RequestOptions {
constructor() {
super({
method: RequestMethod.Get,
headers: new Headers({
'MyHeader': 'MyHeaderValue',
})
});
}
}
@NgModule({
imports: [ BrowserModule, HttpModule, AppRoutingModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ],
providers: [ { provide: RequestOptions, useClass: GlobalHttpOptions} ]
})
export class AppModule { }