1. 安装nodejs和淘宝镜像cnpm
下载安装nodejs，下载后双击按步骤安装即可。安装之后通过node命令
node -v来查看是否安装成功。
npm：nodejs已经集成了npm，node安装会默认装好npm。可通过npm -v命令来查看是否安装成功。
备注：npm 是 Node Package Manager 的简称，顾名思义，它是 node 的包管理工具，也是目前世界上最大的开源库生态系统。相比 npm，yarn 相信大家也不会陌生，它是由 facebook 推出并开源的包管理工具，具有速度快，安全性高，可靠性强等主要优势，参考yarn的安装和使用
。
cnpm：因为node的npm安装插件比较慢，国内建议使用淘宝镜像cnpm工具。即先使用npm安装cnpm工具：npm i -g cnpm --registry=https://registry.npm.taobao.org，然后使用cnpm来安装其他插件。可通过cnpm -v命令来查看是否安装成功。
2. TypeScript的安装（可选）
typescript是ng应用开发中使用的主语言，所以也需要安装ts。打开cmd，输入命令行
cnpm install –g typescript即可完成安装，通过tsc -v命令来验证是否安装成功。
3. 安装脚手架工具Angular-CLI
Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
Cli是Command Line Interface的简写，是一种命令行接口，实现自动化开发流程。它是ng执行开发、测试、打包和发布必备的集成化平台，俗称脚手架。通过cnpm install -g @angular/cli命令进行全局安装，然后通过ng version命令来查看是否安装成功。
脚手架安装成功.png
拓展： ng相关命令
4. 使用脚手架工具创建项目（初始化项目架构）
使用
ng new myProject命令来新建项目，新生成的项目目录结构如下：
项目目录.png
拓展：常用的新建指令
ng g class classname // 新建 class
ng g component componentname // 新建组件
ng g directive directivename // 新建指令
ng g enum enumname // 新建枚举
ng g module modulename // 新建模块
ng g pipe pipename // 新建管道
ng g service servicename // 新建服务
5. 启动项目并打包部署
IDE：可使用vscode、webstorm和sublime等开发工具来开发，推荐使用VSCode，安装完成直接打开即可。
VSCode可直接打开终端进行后续操作，即打开项目根目录进入操作终端：
(1) 安装项目所需的依赖包：若不是新建的项目（如从网络下载项目源码），直接运行项目可能因为缺少依赖包而报错，需在终端键入cnpm install来安装项目所需的依赖包。
备注：推荐使用cnpm，避免npm会因网速等因素导致包下载中断的问题。下载完成会在根目录下生成node_modules文件夹，为项目运行所需的依赖包。
注意：若先打开的VSCode，后下载安装nodejs和cnpm，将导致ncpm命令无法识别，重启VSCode即可解决。
相关报错问题请参考npm/cnpm/ng命令运行报错与解决汇总来解决。
(2) 启动项目：终端键入ng serve，编译成功后启动一个内部服务器。
备注：等待编译完成，打开浏览器输入
localhost:4200/即可启动项目。
相关报错问题请参考npm/cnpm/ng命令运行报错与解决汇总来解决。
(3) 打包：终端键入ng build --prod --aot执行打包命令。
备注：完成后会在根目录下生成dist文件夹（里面有index.html文件和static文件夹），是压缩打包完成的文件。
(4) 部署：用dist文件夹下的打包文件替换线上服务器前端目录，完成打包部署。如：
- 在nginx官网中下载nginx
- 把上一步dist文件夹下的打包文件替换线上服务器前端目录拷贝到nginx/html下并重命名为myProject
- 修改conf/nginx.conf文件中的root路径
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
修改为location 的root ：
location / {
root html/myProject;
index index.html index.htm;
}
点击nginx.exe启动nginx，在浏览器中输入localhost:80即可看到项目。
备注：此时我们只需把nginx打包发给同事，然后告诉他点击nginx.exe后在浏览器中输入localhost:80即可。
备注：Vue项目创建(使用Vue脚手架工具)、启动并打包部署 类似 Angular项目创建(使用Angular脚手架工具)、启动到打包部署，可对比学习。
