1.简介
本文主要介绍如何快速搭建Angular运行环境，以及一些重要配置文件的配置，这些配置关系到项目的运行以及打包发布的正确编译。【ps:网上很多搭建环境的教程但是却并没有相关重要配置文件的配置，这样就很容出现通过ng serve 运行项目很容易，但正在开发以及发布就会遇到各种问题的情况】
2.原料
要使用Angular，首选需要安装angular-cli,而安装angular-cli我们需要nodeJs以及npm;
到node官网下载6.x以上的稳定版本，然后像正常安装程序一样一直下一步直到完成。
安装完成后在命令行里输入 node -v以及npm -v，如果都能打印出来版本号那么基础环境就ok了。
当然为了后面使用npm不会出现网络的问题，这个需要更改淘宝镜像，或者使用smart-npm帮我们职能处理这些事情。
- smart-npm安装
npm install --global smart-npm --registry=https://registry.npm.taobao.org/
3.安装angular-cli
node环境准备好了，之后就需要安装angular的脚手架了；
这个地方有的小伙伴可能之前以及安装过angular-cli，此时我们应当先卸载之前的版本，并且清除缓存，然后再从新安装【ps:之前没安装过的小伙伴也可以先执行这些命令，就当熟悉一下】
- 卸载angular-cli命令
smart-npm uninstall -g angular-cli
- 清除缓存命令
smart-npm cache clean
- 安装angular-cli
samrt-npm install -g @angular/cli
安装完成后在命令行里执行 ng -v ，顺利打印出版本号。至此脚手架就安装完成了。
4.创建项目，并配置重要参数
有了angular-cli我们创建web项目就很容易了，首先在我们的D盘创建一个项目。
- 定位到D盘
cd D:
D:
- 利用angular-cli创建项目 myAngularPro
ng new myAngularPro
注意这里命令行里会出现如下图情况,此时正在安装依赖包，直接ctrl+c取消就可以了，后面使用smart-npm来安装
- 定位到我们项目目录
cd D:/myAngularPro
- 安装依赖模块
smart-npm install
- 依赖包安装完成后，直接就可以启动项目了
ng serve --open
至此我们的项目就算运行起来了，接下来就是一些很重要的参数配置说明了；
在创建完项目后，我们的项目文件myAngualrPro根目录下有一些.json的文件，这里只讲一些我们需要配置的json文件的参数；
- .angular-cli.json文件
这个文件需要配置的是“styles”，以及“scripts”这两个参数，从字面意思就很容理解这个样式和js代码的配置，它们的作用就是导入全局的样式和js代码，比如全局需要jQuery那么就需要在这里配置。
- tsconfig.json文件
这里只需要加一个参数allowJs,值为true,这个参数的作用就是允许我们在局部进入第三方的JS库如：import * as Swiper from './../assets/js/swiper/swiper.min.js';【ps:说道局部引入那么就涉及到了路由异步加载了，这个后面会出教程来讲解】
- 静态资源文件（如图片）、package.json文件
这里需要提醒一下我们的静态资源文件比如图片文件，需要放到D:/myAnauglarPro/src/assets目录中,不然页面会报404找不到图片的；
当开发完项目之后就要执行ng build生成发布的文件了，此时执行ng build命令时后面一定要加上 --base-href ./ 否则编译后的index.html打开会报404找不到js资源文件的。也可以直接在package.json文件中的scripts里面配置。最后直接执行 smart-npm run build 就可以了。
最后提醒一下，build后的项目文件虽然能顺利发布服务器上并且也能访问了，但是刷新页面后会出现404整个页面都找不到，这个也是因为url路径问题导致的，这时我们就需要修改main.module.ts文件，因为这篇文章没有涉及到如何写代码，所以这个后面会出一个代码入门教程来讲解。