Angular4.4.4升级到angular5

Posted by Shen Chaoran on January 8, 2018

Angular中几个文件的作用

proxy.conf.json

设置使用代理来请求API,这样可以在不修改后台代码(CORS允许跨域)的情况下解决前后端分离。

tsconfig.json

  • plugins:
  • paths: 可以在ts文件引用时通过@feature/ol-map直接引用
  • include: 包含到编译里的文件设置。注意:和.angualr-cli.json中的scripts不同。

.angular-cli.json

  • styles: 设置全局引用的样式
  • scripts: 设置全局引用的js文件

package-lock.json

tslint.json

typings.d.ts

引用第三方库后,要在这里全局声明,比如引用jQuery时,要声明 declare var jQuery: any;

花样错误集锦

webpack ContextElementDependency

@angular/cli安装webpack失败,单独安装webpack后,npm list webpack发现有两个webpack,其中angular-cli里的不能用,而且怎么也装不成功。

解决方法:删除package-lock.json后,重新安装@angualr/cli

使用*ngIf或nz-zorro的库,报错Cannot read property 'isSkipSelf' of null

解决方法:"@angular/language-service": "^5.1.0-beta.1"

引用node_modules中的css,其中有相对路径资源,解析路径会出错

custom-elements.min.js.map请求不到

设置跨域资源代理的问题,所有资源都会去代理的域名下请求,即去后台请求。然而该文件其实是在前端ng-cli生成的,所以请求该文件时不用代理。

空格对齐问题

在vscode里设置不管用,得在.editorconfig里配置

引用第三方库

  • js库
    • .angular-cli.jsonscripts里添加js文件
    • typings.d.ts里添加声明
  • css库
    • styles.scss里import。如果是node_modules里的文件可以使用~符,也可以使用相对路径

angular language service 提示报错