Angular4開發環境搭建
阿新 • • 發佈：2017-12-21
roo scrip -- post all under 進行 預編譯 -c
開發工具：@angular/cli
先要下NODE.JS，設置好環境變量；
其次，因為翻不了墻，所以通過淘寶發布的地址下載：https://npm.taobao.org/ 。通過如下命令下載安裝 @angular/cli：
npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @angular/cli
最後，安裝完畢之後，你的終端裏面將會多出一個名叫 ng 的命令，敲下 ng，將會顯示完整的幫助文檔：
創建第一個項目：
進入工作空間，輸入命令：ng serve
進入：http://localhost:4200/
註意事項：
- 如果你需要修改端口號，可以用 ng serve --port ****來進行指定。
- 如果你想讓編譯的包更小一些，可以使用 ng serve --prod，@angular/cli 會啟用 TreeShaking 特性，加了參數之後編譯的過程也會慢很多。所以，在正常的開發過程裏面請不要加 --prod 參數。
- ng serve 是在內存裏面生成項目，如果你想看到項目編譯之後的產物，請運行 ng build。構建最終產品版本可以加參數，ng build --prod。
-
ng 提供了很多非常好用的工具，除了可以利用 ng new 來自動創建項目骨架之外，它還可以幫助我們創建 Angular 裏面所涉及到的很多模塊，最常用的幾個如下：
- 自動創建組件：ng generate component MyComponent，可以簡寫成 ng g c MyComponent。創建組件的時候也可以帶路徑，比如：ng generate component mydir/MyComponent
- 自動創建指令：ng g d MyDirective
- 自動創建服務：ng g s MyService
- 構建項目：ng build，如果你想構建最終的產品版本，可以用 ng build --prod
更多的命令和參數請在終端裏面敲 ng 仔細查看，盡快熟悉這些工具可以非常顯著地提升你的編碼效率。
-
對於國內的開發者來說，上面這些其實不是最重要的，國內開發者碰到的坑主要是由兩點引起的：
- 第一點是網絡問題：比如 node-sass 這個模塊你很有可能就裝不上，原因你懂的。
- 第二點是開發環境導致的問題：國內使用 Windows 平臺的開發者比例依然巨大，而 @angular/cli 在 Windows 平臺上有一些非常惡心的依賴，比如它需要依賴 python 環境、Visual Studio 環境。
所以，如果你的開發平臺是 Windows，請特別註意：
- 如果你知道如何給 npm 配置代理，也知道如何FQ，請首選 npm 來安裝 @angular/cli。
- 否則，請使用 cnpm 來安裝 @angular/cli，原因有三：1、cnpm 的緩存服務器在國內，你裝東西的速度會快很多；2、用 cnpm 可以幫你避開某些模塊裝不上的問題，因為它在服務器上面做了緩存；3、cnpm 還把一些包都預編譯好了緩存在服務端，不需要把源碼下載到你本地去編譯，所以你的機器上可以沒有那一大堆麻煩的環境。
- 如果安裝失敗，請手動把 node_modules 目錄刪掉重試一遍，全局的 @angular/cli 也需要刪掉重裝，cnpm uninstall -g @angular/cli。
- 如果 node_modules 刪不掉，爆出路徑過長之類的錯誤，請嘗試用一些文件粉碎機之類的工具強行刪除。
- 最新版本的 @angular/cli 經常會有 bug，尤其是在 Windows 平臺上面，所以請不要追新版本追太緊。如果你發現了莫名其妙的問題，請嘗試降低一個主版本試試。這一點非常重要，很多初學者會非常困惑，代碼什麽都沒改，就升級了一下環境，然後就各種編譯報錯。
- 對於 Mac 用戶或者 *nix 用戶，請特別註意權限問題，命令前面最好加上 sudo，保證有 root 權限。
- 無論你用什麽開發環境，安裝的過程中請仔細看 log。很多朋友沒有看 log 的習慣，報錯的時候直接懵掉，根本不知道發生了什麽。
Angular4開發環境搭建