Angular5 学习笔记

Angular5 学习

升级node版本

1、检测安装node的路径，使用命令： where node

2、清除npm cache：npm cache clean -f

3、安装n模块：npm install -g n 或 npm install -g n --force

4、升级npm ：npm install npm@latest -g

5、使用https://www.npmjs.com/package/nrm 做切换,查看配置 npm config list

$ npm install -g npm

$ nrm ls
 
      * npm -----  https://registry.npmjs.org/
        cnpm ----  http://r.cnpmjs.org/
        taobao --  https://registry.npm.taobao.org/
        nj ------  https://registry.nodejitsu.com/
        rednpm -- http://registry.mirror.cqupt.edu.cn
        skimdb -- https://skimdb.npmjs.com/registry

$ nrm use cnpm  //switch registry to cnpm 
    Registry has been set to: http://r.cnpmjs.org/

6、删除配置

npm config delete registry
npm config delete disturl

或者 

npm config edit 
找到淘宝那两行,删除

开发中常用命令

npm + ng

npm i --save 包名：软件依赖 
npm i --save-dev 包名：开发依赖

ng new 项目名：新建Angular项目

ng build -prod：生产环境编译
ng serve：启动开发服务器

如何用 npm 同时执行两条监听命令？

需要安装 concurrently: npm install -g concurrently

如下图修改package.json的 scripts:

Mock Rest API

json-server快速“伪造”后台接口:

json-server：用于快速搭建REST API的利器

安装：npm install -g json-server

几种常见的API测试工具

使用Postman测试常用的API

使用VSCode的REST Client插件

常见问题解决

安装@angular/cli 出现错误

解决方案：

先卸载删除掉原来的安装，清除缓存，在进行重新的安装
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli

处理 TypeScript的书写规范（TSLint）配置修改

新版Angular中使用的Typescript书写规范非常恼人，比如默认会启用no-trailing-whitespace这样的选项。官方对此的说明是为了配合GIT的使用规范。  

实战采用Flex布局

支持svg：通过注入MatIconRegistry和DomSanitizer完成

http://iconfont.cn/ 阿里矢量图标库

webstorm 的angular插件不提示解决方案

第三方JS类库的引入

标准的JS库引入方法，例如echart：npm install --save-dev @types/echarts

注意两件事，首先我们安装时使用了 --save-dev开关，因为这个类型定义文件只对开发时有用，它并不是我们工程的依赖，只是为了编写时的方便。

第二件事我们使用了 @types/echarts 这样一个有点怪的名称，其实是这样的，微软维护了一个海量的类型定义数据中心，这个就是 @types。那么我们为了寻找echarts就会在@types这个目录下搜索它的二级目录。

引入库的特殊情况

1. 使用npm install --save-dev @types/xxx,没有找到对应的类型定义文件，怎么办？

解决方案：

首先应该去检查一下node_modules目录中的你要使用的类库子目录（本例中是echarts）中是否有类型定义文件，因为有的类库会把类型定义文件直接打包在npm的包中。如果是这种情况，那么我们什么都不需要做，直接使用就好了。

2. 团队开发的（自定义的）类库，找不到怎么办？

解决方案：

在src/typings.d.ts中加上一行: declare module 'echarts'; 然后在要使用类库组件中引入：import * as echarts from 'echarts'; 就可以正常使用了。（这种添加方式是没有智能提示和自动完成的，你需要自己保证调用的正确性。如果觉得不爽，还是希望有提示、类型检查等等，那就得自己写一个类型定义文件了，可以参考https://basarat.gitbooks.io/typescript/content/docs/types/ambient/d.ts.html 去编写自己的类型定义文件。）