angular-cli小白入門選集

1 安裝與使用

1. 首先確保安裝了nodejs。
2. npm i angular-cli -g。
3. ng-cli的全局關鍵字爲ng。
4. 建立新項目：ng new projectName [options]。
5. 建立組件：ng g component componentName。
6. 啓動server：ng server，默認端口4200。
7. 打包：ng build --prod，默認生成/dist目錄，並將打包後的結果存放在此。
8. 測試：ng test，使用 karma 運行單元測試。
9. cli版本：ng version
10. 錯誤檢測：ng lint，運行codelyzer linter檢測。

2 命令參考

2.1 建立項目

命令：ng new proName [options]

參數	描述
–dry-run -d	只輸出要建立的文件和執行的操做，實際上並無建立項目
–verbose -v	輸出詳細信息
–skip-npm	在項目第一次建立時不執行任何npm命令
–name	指定建立項目的名稱

2.2 初始化項目

在當前所在目錄下初始化一個新的 Angular 項目 
命令：ng init proName [options] 
參數同建立項目。

2.3 建立類

在項目中建立模塊、組件、指令等代碼。

命令： ng generate <type> [options]
簡寫： ng g <type> [options]

類型	用法
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module
Route	ng g route my-route 當前已禁用

參數：

參數	描述
–flat	不在自用目錄內建立代碼
–route=<route>	指定父路由.僅用於生成組件和路由.默認爲指定的路徑。
–skip-router-generation	跳過生成父路由配置。只能用於路由命令。
–default	指定路由應爲默認路由。
–lazy	指定路由是延遲的。 默認爲true。

2.4 獲取/設置cli配置

獲取配置：

命令： ng get <path1, path2, ...pathN> [options]

設置配置：

命令： ng get <path1=value1, path2=value2, ...pathN=valueN> [options]

options：

參數	描述
–global	返回全局配置值，而不是本地配置值（若是都設置）. 此選項還可使命令在項目目錄外工做

2.5 測試

使用 karma 運行單元測試 
命令： ng test [options]

參數	描述
–watch	繼續運行測試. 默認爲true
–browsers , –colors , –reporters , –port , –log-level	這些參數直接傳遞給karma

3 在指定目錄中建立組件等

1. src目錄下默認在app文件夾下建立組件。
2. 若想在子目錄下建立，則須要先cd到這個目錄，再執行ng g。

4 使用sass

在cli建立的ng2項目中使用sass很方便，只須要將你的樣式文件的css後綴改爲scss，而且在component.ts中引用就能夠了，cli內部已經配置了sass-loader。

項目中的angular-cli.json中有一個配置：

"defaults": { "styleExt": "css" }

• 1
• 2
• 3

• 1
• 2
• 3

這裏貌似應該改爲scss，可是我沒有改，打包、啓動server都沒有問題。

5 安裝angular-cli報錯

今天下載大漠的NiceFish項目，而後啓動npm i ，安裝angular-cli的時候報錯，發現這個項目與我全局的ng-cli版本不一致，而後npm提示

npm WARN deprecated angular-cli@1.0.0-beta.28.3: angular-cli has been rename

而後而後就卡住不動了。我能看明白這句話的意思，但不知道如何解決。由於個人ng-cli已經不能用了。 
而後我就開始折騰，刪除全部ng-cli的包，用everything檢索全部目錄的angular，除了項目中出現的angular-cli，通常出如今如下幾個目錄： 
1. C:user/chengyanzhao/AppData/Local&Roaming 
2. npm全局包路徑下

我將這幾個位置的ng-cli內容都刪除了，可是無論用，然後又卸載了nodejs，從新安裝，依然無效。

後來各類查資料，發現npm在安裝包的時候能夠查看進度

npm i angular-cli -g --verbose

而後看到裏面安裝在哪裏的時候出錯了。好比gyp、node-sass等。出問題的就全局安裝，而後在裝ng-cli。

最後終於安裝成功了。。。。。心塞。

這裏記錄一下，以防之後再出現這種問題不知道怎麼搞定。