Angular2 - Unable to import http module

Question

Answer did not help me import http module without error.

$ ng version
Angular CLI: 1.5.0
Node: 6.11.5
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1
$

Below code,

/* ../src/app/app.module.ts */
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent,
    FilterPipe,
    LoggingService
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpClientModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and service code,

/*  ../src/app/data.service.ts */
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class DataService {

  constructor(private http: HttpClient) { }

}

gives error:

ERROR in src/app/data.service.ts(2,9): error TS2305: Module '"/home/../My_Websites/Youtube_sites/angular_2_playlist/ninja-directory/node_modules/@angular/http/http"' has no exported member 'HttpClient'.

Why HttpClient service cannot be injected in the constructor of service code?

The error node_modules/@angular/http/http"' has no exported member states that you'are importing it from other place — yurzui
– yurzui, Commented Nov 18, 2017 at 8:39

Shubham Kandiyal · Accepted Answer · 2017-11-18 11:19:26Z

1

You need to call your services in app.component.ts

import {DataService} from './data.service.ts';

and also give in your app.component.ts file

providers:[DataService]

See TutorialsPoint Example for More

Thanks

answered Nov 18, 2017 at 11:19

Shubham Kandiyal

3402 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

overexchange Over a year ago

What does providers and bootstrap signify? What is their purpose?

Collectives™ on Stack Overflow

Angular2 - Unable to import http module

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related