【Angular6】前端搭建

前言

    本次开发使用angular6结合ng-Zorro完成前端的开发。本次组内的前端由我来搭建。
    本次搭建过程是在前辈的基础上做的，所以有一些可以复用的功能为本次搭建节省了很多的时间，不过这个学习的过程还是很宝贵的。

搭建步骤

温馨提示

（1）angular开发使用,目前实践典型项目有ITOO-PC端/physical-PC端。
（2）使用ng-zorro组件库开发。
（3）样式使用 .less文件，less是一门向后兼容的 CSS 扩展语言。

一、环境配置：

前端环境要求（Node已经升级到10.15.0版）：

步骤：

1.1检查全局环境

打开cmd，输入ng version，查看本地的环境配置，如果满足要求则可以直接搭建项目，生成的项目与本地环境一致。
如果本地环境不能满足，则需要对本地的nodejs和脚手架升级(也可不升级全局环境，生成项目后只升级项目中的环境)。
环境升级

1.1.1Nodejs升级到最新版本

1. 清除缓存（npm cache）
   npm cache clean -f
2. 安装n模块
   npm install -g n --force
3. 下载nodejs
   官网下载nodejs 最新版本，地址：https://nodejs.org/en/ 。
4. 安装nodejs
   需要将下载的msi镜像覆盖安装：使用where node找到node以前安装的路径，然后将最新版本安装到此路径下
   1.1.2脚手架升级到6.2.4版本
5. 卸载之前版本
   npm uninstall @angular/cli -g
6. 清除缓存
   npm cache verify
7. 安装6.2.4版本
   npm install @angular/[email protected] -g

1.2搭建项目

1. 生成项目
   在目录下打开cmd命令，生成一个名为test-cook的项目。
   ng new test-cook，等待最后会提示successfully。
   
2. 使用vs code 或 webstorm打开项目
3. 配置仓库
   npm config set refgistry http://registry.npmjs.org
4. 安装全局yarn
   npm install yarn -g
   如果已经安装了yarn，可以跳过此步骤。
5. 下载node_modules
   输入命令 yarn。 yarn等同于npm install，使用yarn可以将兼容的包下载下来，相比于npm install更加安全。
6. 启动项目
   ng serve -o （-o会自动打开网页）

1.3创建workspace

①引入ng-zorro组件：ng add ng-zorro-antd
添加workspace组件（app表示在app这个目录下创建的组件，workspace为新建的组件的名称）：
一个空组件：
ng g component -p app --styleext=less --name=workspace
确定好使用某个Zorro样式时：
ng g ng-zorro-antd:layout-custom-trigger -p app --styleext=less --name=workspace
②创建 .module.ts、.routes.ts文件，确定路由跳转。
路由分为同步路由与异步路由，同一层级的创建同步路由，有下一层级的创建异步路由。

1.4在workspace下创建各模块

根据各模块需求创建模块，配置路由。

1.5配置静态资源、环境