angular 6 - @angular/common/http 未找到
angular 6 - @angular/common/http not found
我正在尝试学习 angular 6,但是,我遇到了客户端无法加载 @angular/common/http
依赖项的问题。我遇到了这个 ,但是,none 的解决方案有效。
市场-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;
}
}
这是我注册的应用模块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 {}
我有
[2] 18.06.14 00:38:33 404 GET /node_modules/@angular/common/http.js
在客户端。这也是我的 package.json 文件,用于显示依赖项。
{
"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"
}
}
我在这里找到了可行的解决方案。它是关于将映射添加到 systemjs.config.js
中,因为它提到
长话短说我需要添加行
'@angular/common/http': 'node_modules/@angular/common/bundles/common-http.umd.js',
我正在尝试学习 angular 6,但是,我遇到了客户端无法加载 @angular/common/http
依赖项的问题。我遇到了这个
市场-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;
}
}
这是我注册的应用模块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 {}
我有
[2] 18.06.14 00:38:33 404 GET /node_modules/@angular/common/http.js
在客户端。这也是我的 package.json 文件,用于显示依赖项。
{
"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"
}
}
我在这里找到了可行的解决方案。它是关于将映射添加到 systemjs.config.js
中,因为它提到
长话短说我需要添加行
'@angular/common/http': 'node_modules/@angular/common/bundles/common-http.umd.js',