Angular 4.x 环境搭建到项目编译发布，.angular-cli.json、tsconfig.json、package.json重要参数配置

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文件，由于这篇文章没有涉及到如何写代码，因此这个后面会出一个代码入门教程来说解。