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))

附参考地址：https://segmentfault.com/a/1190000010259536

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这块问题不少，一个坑接着一个坑。。。。。