1. 安装nodejs和淘宝镜像cnpm

下载安装nodejs，下载后双击按步骤安装即可。安装之后通过node命令node -v来查看是否安装成功。

npm：nodejs已经集成了npm，node安装会默认装好npm。可通过npm -v命令来查看是否安装成功。

备注：npm 是 Node Package Manager 的简称，顾名思义，它是 node 的包管理工具，也是目前世界上最大的开源库生态系统。相比 npm，yarn 相信大家也不会陌生，它是由 facebook 推出并开源的包管理工具，具有速度快，安全性高，可靠性强等主要优势。

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相关命令

ng相关命令.png

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可直接打开终端进行后续操作，即打开项目根目录进入操作终端：

VSCode操作终端.png

(1) 安装项目所需的依赖包：若不是新建的项目（如从网络下载项目源码），直接运行项目可能因为缺少依赖包而报错，需在终端键入cnpm install来安装项目所需的依赖包。

在VSCode终端安装依赖包.png
补充—安装依赖包完成.png

备注：推荐使用cnpm，避免npm会因网速等因素导致包下载中断的问题。下载完成会在根目录下生成node_modules文件夹，为项目运行所需的依赖包。
注意：若先打开的VSCode，后下载安装nodejs和cnpm，将导致ncpm命令无法识别，重启VSCode即可解决。

相关报错问题请参考npm/cnpm/ng命令运行报错与解决汇总来解决。

(2) 启动项目：终端键入ng serve，编译成功后启动一个内部服务器。

项目编译成功.png
备注：等待编译完成，打开浏览器输入localhost:4200/即可启动项目。
启动项目.png

相关报错问题请参考npm/cnpm/ng命令运行报错与解决汇总来解决。

(3) 打包：终端键入ng build --prod --aot执行打包命令。

打包.png
备注：完成后会在根目录下生成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脚手架工具)、启动到打包部署，可对比学习。