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文件，由於這篇文章沒有涉及到如何寫代碼，因此這個後面會出一個代碼入門教程來說解。