angular项目从部署到启动

angular是前端三大框架之一，适合开发大型需要多人合作的项目，代码规范，社区活跃，不过学习曲线陡峭。这篇介绍环境搭建，完成就可以启动ng项目了。

一、Node.js和npm

在node官网（https://nodejs.org/zh-cn/download/）下载安装包，根据电脑系统安装对应包。

打开安装包，直接点击下一步，完成安装。

检测Node.js版本：点击开始 =》运行 =》输入‘cmd’ =》输入命令‘node –version’。

NPM是随同NodeJS一起安装到本地的包管理工具，由于NodeJS集成了NPM，我们可以通过命令行‘npm -v’检测是否安装成功：

二、TypeScript的安装（可选）

typescript，是ng应用开发中使用的主语言，所以也需要安装ts。打开cmd，输入命令行‘npm install –g typescript’。

验证 ‘tsc -v’ 安装情况

三、Angular-cli的安装

Cli是Command Line Interface的简写，是一种命令行接口，实现自动化开发流程。它是ng执行开发、测试、打包和发布必备的集成化平台，俗称脚手架。
全局安装‘npm install –g @angular/cli’。

稍作等待，完成安装可以检查脚手架版本‘ng -v’。

期间可能会安装失败，查看错误信息，可能由于node-sass的包被墙了，解决方案当然是用cnpm安装。首先安装淘宝镜像‘npm install –g cnpm –registry=https://registry.taobao.org’

再安装node-sass，命令行是‘cnpm install –save-dev node-sass’，完成后再执行cli的安装命令即可完成安装。

四、安装IDE，启动项目，打包部署

推荐使用IDE：VSCode，下载地址：https://code.visualstudio.com/，安装完成直接打开即可。VSCode可直接打开终端，进行后续操作。
首先，打开项目更目录，进入下面操作终端。
第一步，终端键入‘cnpm install’，安装项目所需的依赖包。推荐使用cnpm，避免npm会因为网速等因素导致包下载中断的问题。下载完成会在根目录下生成‘node_modules’文件夹，为项目运行所需的依赖包。

第二步，启动项目。终端键入‘ng serve’，等待编译完成，打开浏览器输入‘localhost:4200/’即可启动项目。

第三步，打包部署。终端键入‘ng build –prod -aot’，执行打包命令。完成后会在根目录下生成dist文件夹，里面是压缩打包完成的文件。用该目录下文件替换线上服务器前端目录，完成打包部署。