angular 6 - @angular/common/http not found

Question

I am trying to learn angular 6, however, I am facing an issue where client is not able to load @angular/common/http dependency. I came across this subject, however, none of the solutions worked.

market-data.service.ts

import { Injectable } from "@angular/core";
//import { Http, Response, Headers } from '@angular/http';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import { CoinMarketCapTokenEntity } from "../entity/coinmarketcaptoken-entity";

const coinMarketcapCoinsUrl = "https://s2.coinmarketcap.com/generated/search/quick_search.json";

@Injectable()
export class MarketDataService {
    private _http: HttpClient;

    constructor(http: HttpClient) {
        this._http = http;
    }

    getCoinMarketCapTokens(): Observable<CoinMarketCapTokenEntity[]> {
        return this._http.get<CoinMarketCapTokenEntity[]>(coinMarketcapCoinsUrl);
    }

    getHeaders(): HttpHeaders {
        let headers = new HttpHeaders();
        headers.append("Accept", "application/json");
        return headers;
    }
}

And here is app module that I registered HttpClientModule

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
//import { HttpModule } from "@angular/http";
import { HttpClientModule } from "@angular/common/http";

//import { AppComponent } from "./app/app.component";
import { MarketDataComponent } from "./app/market-data.component";
import { MarketDataService } from "./app/market-data.service";
import { KLineComponent } from "./app/kline.component";

import { appRouterModule } from "./app.routes";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        appRouterModule
    ],
    declarations: [
        MarketDataComponent,
        KLineComponent
    ],
    bootstrap: [
        MarketDataComponent
    ],
    providers: [
        MarketDataService
    ]
})
export class AppModule {}

And I am having

[2] 18.06.14 00:38:33 404 GET /node_modules/@angular/common/http.js

on client side. Here is also my package.json file to show dependencies.

{
  "name": "awesome-angular",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "concurrently \"npm run tsl\" \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "tsl": "tslint -c tslint.json 'src/**/*.ts'"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^6.0.5",
    "@angular/compiler": "^6.0.5",
    "@angular/core": "^6.0.5",
    "@angular/forms": "^6.0.5",
    "@angular/http": "^6.0.5",
    "@angular/platform-browser": "^6.0.5",
    "@angular/platform-browser-dynamic": "^6.0.5",
    "@angular/router": "^6.0.5",
    "core-js": "^2.5.4",
    "lite-server": "^2.3.0",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "systemjs": "^0.21.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@types/core-js": "^2.5.0",
    "@types/jasmine": "^2.8.8",
    "@types/node": "^10.3.3",
    "codelyzer": "^4.3.0",
    "concurrently": "^3.5.1",
    "tslint": "^5.10.0",
    "typescript": "^2.9.2"
  }
}

Answer 1

I found the working solution here. It was about adding a mapping into systemjs.config.js as it mention here

Long story short I needed to add line

'@angular/common/http': 'node_modules/@angular/common/bundles/common-http.umd.js',