import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; import { HttpClientModule } from '@angular/common/http' ; import { RouterModule , Routes } from '@angular/router' ; import { AppService } from './app.service' ; import { AppComponent } from './app.component' ; import { HomeComponent } from './home.component' ; import { LoginComponent } from './login.component' ; import { Injectable } from '@angular/core' ; import { HttpEvent , HttpInterceptor , HttpHandler , HttpRequest , HTTP_INTERCEPTORS } from '@angular/common/http' ; import { Observable } from 'rxjs/Observable' ; @ Injectable ( ) export class XhrInterceptor implements HttpInterceptor { intercept ( req , next ) { const xhr = req . clone ( { headers : req . headers . set ( 'X-Requested-With' , 'XMLHttpRequest' ) } ) ; return next . handle ( xhr ) ; } } const routes = [ { path : '' , pathMatch : 'full' , redirectTo : 'home' } , { path : 'home' , component : HomeComponent } , { path : 'login' , component : LoginComponent } ] ; @ NgModule ( { declarations : [ AppComponent , HomeComponent , LoginComponent ] , imports : [ RouterModule . forRoot ( routes ) , BrowserModule , HttpClientModule , FormsModule ] , providers : [ AppService , { provide : HTTP_INTERCEPTORS , useClass : XhrInterceptor , multi : true } ] , bootstrap : [ AppComponent ] } ) export class AppModule { }