Angular5學習札記

1.使用cnpm安裝jQuery和bootstrap後，頁面沒有加載的問題

-使用cnpm安裝的路徑和使用npm安裝路徑不同，解決以下：

把css路徑改爲
"../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css"
使用node_modules裏的帶版本號的文件，緣由是nodee_modules下的bootstrap只是一個快捷方式，不信你打開目錄看下,若是是用webstorm開發的話，仔細看下文件夾右上角是否是帶有一個箭頭。

2.Property 'map' does not exist on type 'Observable'

解決方案：增長import 'rxjs/add/operator/map'

 3.修復4.0後http請求錯誤的問題：unused import {httpModule} from '@angular/http'或者NullInjectorError: No provider for Http

解決方案：

1）引入

import {HttpClient} from "@angular/common/http";

import * as _ from 'lodash';

2）修改調用

.map(data => _.values(data))

附參考地址：http://www.javashuo.com/article/p-fnoyflac-ck.html

 4.anguar5 http proxy 代理設置無效

解決方案：URL地址後增長/*，如：「api/」改成「api/*」，還須要增長一個pathRewrite節點

"/api/*": {
"target": "http://localhost:26220/api",
"changeOrigin": true,
"secure": false,
"logLevel": "debug",
"pathRewrite": {"^/api" : ""}

具體pathRewrite節點的配置不太明白，應該是一個地址重寫，將以「/api」開頭的請求重寫爲空，根據日誌打印出來的內容爲：

[HPM] Rewriting path from "/api/product" to "/product"
[HPM] GET /api/product ~> http://localhost:26220/api

先重寫了路徑爲「/product」，而後發起get請求後target到了 http://localhost:26220/api下，若是連起來就是訪問http://localhost:26220/api/product

最後放上參考連接：https://stackoverflow.com/questions/43616755/angular-cli-proxy-doesnt-work

 5.angular5 下的observable問題，webapi接口返回了product[]數據，angular接收時轉換爲product[]時頗費周折，看視頻中直接json就好了，其實angular4的http模塊已經升級爲httpclient了，並且調用方法也有所不一樣，試了不少種方法都不行，最後發現直接在get後要定義的格式便可，以下所示：

getProducts(): Observable<Product[]> {
const products = this.http.get<Product[]>('/api/product');
return products;
}

終於解決了。。。。

 6.httpClient 發起get請求拼接請求參數使用reduce失效的問題，本來使用的方法以下：

 Object.keys(params).filter(key => params[key]).reduce((sum: HttpParams, key: string) => {
sum.set(key, params[key]);
return sum;
}, new HttpParams());

修改以後的方法以下：

Object.getOwnPropertyNames(params)
.reduce((p, key) => p.set(key, params[key]), new HttpParams());

參考連接：https://github.com/angular/angular/issues/18012

跟着一個angular4的視頻學習angular，我本地是angular5，前面基礎知識還好，到這個http這塊問題很多，一個坑接着一個坑。。。。。