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