Angular 6: You need to import the HttpClientModule in your AppModule

Question

Before minusing, please note that no other issues reported helped me. Looked through the whole stackoverflow regarding this issue.

This is in app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LalaComponent } from './lala/lala.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ApiModule } from 'atlas-client';

@NgModule({
  declarations: [
    AppComponent,
    LalaComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    ApiModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

This is in lala.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-lala',
  templateUrl: './lala.component.html',
  styleUrls: ['./lala.component.css']
})
export class LalaComponent implements OnInit {

  constructor(private http: HttpClient) {
    console.log('test');
  }

  ngOnInit() {

  }
}

package.json:

{
  "name": "lala-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.6",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.7",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

I get this error:

Error: You need to import the HttpClientModule in your AppModule! See also https://github.com/angular/angular/issues/20575

at new ApiModule (atlas-client.js:216)
at _createClass (core.js:9264)
at _createProviderInstance$1 (core.js:9234)
at initNgModule (core.js:9170)
at new NgModuleRef_ (core.js:9899)
at createNgModuleRef (core.js:9888)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:11719)
at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create

(core.js:12421) at core.js:4720 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

Please note, that the issue still there when I remove import { HttpClientModule } from '@angular/common/http'; line with respective import.

Answer 1

There is a bug in angular-cli when the swagger-codegen package is either linked using npm link or installed directly using: npm install PATH_TO_GENERATED_PACKAGE/dist --save (see: https://github.com/angular/angular-cli/issues/8284).

The issue seems to be with ng serve only, not with ng build --prod --base-href=..., but I did not test an 'ng build' yet.

The "You need to import the HttpClientModule in your AppModule!" message is not valid, but an error is thrown anyhow.

An (ugly) workaround described in this ticket is to generate the code using swagger-codegen-cli (or openapi-generator-cli), search for, and comment out the error message:

// if (!http) {
//     throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
//     'See also https://github.com/angular/angular/issues/20575');
// }

Next: run npm install && npm run build and install the package in the consuming project.

A cleaner solution would be to use a (private) npm registry.

---

UPDATE 14/7/2018

Further investigation showed that the workaround described above does not solve all problems. Instead, I am now using a private npm registry Verdaccio and have no issues anymore.

-Arjen