Error in app.module.ts in Angular 4

Question

I am working on a tree view control in Angular 4 and I am stuck with providers in app.module.ts as follows

import { NgModule, ErrorHandler, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Router, ActivatedRoute } from '@angular/router';
import { AppComponent } from './app/app.component';
import { Observable } from 'rxjs/Observable';
import { TreeView } from './treeview/tree-view.directive';
import { TreeViewComponent } from './treeview/tree-view.component';
import { HttpModule } from '@angular/http';
import { AppRouteModule } from './app/app.routing';

@NgModule({
    imports: [BrowserModule, HttpModule, AppRouteModule],
    declarations: [AppComponent, TreeViewComponent, TreeView],
    bootstrap: [AppComponent],
    providers: [  
    {  
            provide: Http,  
            useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) =>
                         new HttpInterceptor(xhrBackend, requestOptions, router),  
            deps: [XHRBackend, RequestOptions, Router]  
    }  
    ]
})

I am getting red squiggly at Http, XHRBackend, RequestOptions and HttpInterceptor in providers section in Visual Studio 2017.

I have added HttpModule but still it throws error.

Any help would be greatly appreciated.

Answer 1

You need to import

import { RequestOptions, Http , XHRBackend } from '@angular/http';
import { HttpInterceptor } from './interceptors/HttpInterceptor';