1、要安裝CLI命令必須首先安裝Nodejs和npm包，npm包在裝好nodejs後自帶的。

2、首先建立一個目錄，用來建立Angular專案，如下圖所示：

3、開啟dos視窗，然後進入到此目錄中，如下圖所示：

4、安裝 Angular CLI，使用：npm install -g @angular/cli 命令全域性安裝 Angular CLI，如下圖所示：

5、安裝完之後如果沒有錯誤，說明cli命令安裝成功，如下圖所示：

6、安裝好之後還要加入環境變數，否則無法識別ng命令，全域性安裝的路徑為：C:\Users\Administrator\AppData\Roaming\npm，然後將此目錄新增到path中，如下圖所示：

8、開啟dos視窗，然後輸入：ng --version檢視版本號，如果沒有出現錯誤，說明cli命令配置成功，如下圖所示：

9、然後輸入ng new my-app命令來建立專案，如下圖所示：

10、如果建立成功，就會出現Successfully，如下圖所示：

11、建立好的目錄結構如下圖所示：

12、進入到my-app目錄，然後輸入ng serve --open或者npm start，用來啟動服務，在啟動之前會先編譯模組，如下圖所示：

13、編譯完成之後就是啟動web服務了，如下圖所示：

14、啟動之後會自動開啟瀏覽器，然後顯示出頁面資訊，如下圖所示：

15、生成的檔案目錄為：

16、angular.json：使用ng命令時所使用的檔案，當使用ng serve --open命令時，ng命令就會去讀取該檔案，內容如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",//JSON Schema 是一個允許我們註解和驗證JSON資料格式的工具。Angular CLI使用它來強化對於Angular Workspace schema的解釋說明，有了此說明，在書寫json時會自動提示並且有校驗正確性功能。
  "version": 1,//指明瞭Angular 工作空間 概要的版本。
  "newProjectRoot": "projects",//這個屬性定義了由CLI建立的新的內部應用和庫放置的位置。預設值為：projects
  "projects": {//這個屬性包含了工作空間中所有專案的配置資訊。
    "my-app": {
      "root": "",//指定了專案檔案的根資料夾，可能為空，但是它指定了一個特定的資料夾。
      "sourceRoot": "src",//指定了專案原始檔位置,就是當前檔案所在目錄下的src目錄
      "projectType": "application",//表明了 專案的狀態 是 `appliaction`還是`library`。
      "prefix": "app",//當CLI建立 自動為selector元資料的值新增的字首名。
      "schematics": {},//屬性配置 `Schematics packages`。
      "architect": {//任何專案都可以自定義 自動化命令，如 打包、serve、test、lint等等。這些都是基於prebuilt builders ，叫做Architect Targets。
        "build": {
          "builder": "@angular-devkit/build-angular:browser",//
          "options": {//使用ng builid所需要的配置項
            "outputPath": "dist/my-app",// 編譯後的輸出目錄
            "index": "src/index.html",//主頁檔案
            "main": "src/main.ts",//程式入口檔案
            "polyfills": "src/polyfills.ts",// 指定polyfill檔案
            "tsConfig": "src/tsconfig.app.json",//指定tsconfig檔案
            "assets": [//記錄資原始檔夾，構建時複製到`outDir`指定的目錄
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [//引入全域性樣式，構建時會打包進來，常用於第三方庫引入的樣式
              "src/styles.css"
            ],
            "scripts": []// 引入全域性指令碼，構建時會打包進來，常用語第三方庫引入的指令碼
          },
          "configurations": {//build配置環境檔案
            "production": {//設定編譯目錄
              "fileReplacements": [//決定使用哪個環境檔案
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,//使用ng build時，相當於在命令列中使用ng build --optimization
              "outputHashing": "all",//使用ng build時，相當於在命令列中使用ng build --outputHashing
              "sourceMap": false,//使用ng build時，相當於在命令列中不使用ng build --sourceMap
              "extractCss": true,//使用ng build時，相當於在命令列中使用ng build --extractCss
              "namedChunks": false,//使用ng build時，相當於在命令列中不使用ng build --namedChunks
              "aot": true,//使用ng build時，相當於在命令列中使用ng build --aot
              "extractLicenses": true,//使用ng build時，相當於在命令列中使用ng build --extractLicenses
              "vendorChunk": false,//使用ng build時，相當於在命令列中不使用ng build --vendorChunk
              "buildOptimizer": true,//使用ng build時，相當於在命令列中使用ng build --build--optimizer
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",//
          "options": {//當使用ng serve命令時，會讀取配置項
            "browserTarget": "my-app:build"//然後就會去執行my-app:build的配置
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"//然後環境檔案使用builid中的production
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "my-app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-app:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "my-app"//當使用CLI命令時，`defaultProject`代表顯示的名字。
}
 

17、package.json：使用npm命令時所使用的檔案，npm命令就會去讀取該檔案，內容如下：

{
  "name": "my-app",//專案名稱
  "version": "0.0.0",//版本號
  "scripts": {//定義npm選項，如：npm ng，npm start,npm build,npm test,npm lint,npm e2e
    "ng": "ng",//npm ng相當於執行ng命令
    "start": "ng serve",//npm start 相當於執行ng serve命令
    "build": "ng build",//npm start 相當於執行ng build命令
    "test": "ng test",//npm start 相當於執行ng test
    "lint": "ng lint",//npm start 相當於執行ng lint命令
    "e2e": "ng e2e"//npm start 相當於執行ng e2e命令
  },
  "private": true,//如果你在包的package.json中設定"private": true，則npm會拒絕釋出它。
  "dependencies": {//開發時所依賴的包，如果別人只是使用或下載你的npm包，就不需要安裝這裡面的,包含了npm包名字與版本範圍(version range)的對映。版本範圍是一個字串,包含了一個或多個描述符。dependencies同樣可以用一個tarball或git url來定義。
	/*
		>version 版本號必須比version大
		>=version 大於等於
		<version 小於
		<=version 小於等於
		~version "近似等價於version"
		^version "與version相相容"
	*/
    "@angular/animations": "~7.1.0",//@angular/animations屬於包名，~7.1.0屬於包的版本號
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {//開發時所依賴的包，如果別人只是使用或下載你的npm包，就不需要安裝這裡面的,測試和編譯程式碼所需要的包
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.0",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

18、tsconfig.json：

{
  "compileOnSave": false,//在最頂層設定compileOnSave標記，可以讓IDE在儲存檔案的時候根據tsconfig.json重新生成檔案。
  "compilerOptions": {//配置編譯預設屬性
    "baseUrl": "./",//解析非相對模組名的基準目錄
    "outDir": "./dist/out-tsc",//輸出目錄
    "sourceMap": true,//debug把 ts 檔案編譯成 js 檔案的時候，同時生成對應的 map 檔案
    "declaration": false,//是否生成相應的.d.ts檔案。
    "module": "es2015",//指定module 的版本，'none', 'commonjs', 'amd', 'system', 'umd', 'ES6', or 'es2015'
						//只有 ‘amd' 和 'system’ 可以和 outFile 屬性一起用
						//當target 屬性是 ES5或者更低版本的時候，'ES6'和'es2015' 這兩個值可能不能生效，
    "moduleResolution": "node",//模組的解析
    "emitDecoratorMetadata": true,//給原始碼裡的裝飾器宣告加上設計型別元資料
    "experimentalDecorators": true,//啟用實驗性的ES裝飾器。
    "importHelpers": true,
    "target": "es5",//編譯目標平臺（es3, es5, es2015）
    "typeRoots": [//如果指定了typeRoots，只有typeRoots下面的包才會被包含進來
      "node_modules/@types"//node_modules/@types資料夾下以及它們子資料夾下的所有包都是可見的
    ],
    "lib": [ //編譯過程中需要引入的庫檔案的列表
      "es2018",
      "dom"
    ]
  }
}

19、src/tsconfig.app.json檔案：

{
  "extends": "../tsconfig.json",//從tsconfig.json檔案繼承過來
  "compilerOptions": {
    "outDir": "../out-tsc/app",//將tsconfig.json檔案中的屬性覆蓋掉，然後使用此檔案的屬性
    "types": []//如果指定了types，只有被列出來的包才會被包含進來
  },
  "exclude": [//不包含的編譯目錄
    "test.ts",
    "**/*.spec.ts"
  ]
}

20、執行順序，當在命令列中輸入npm start（會自動執行ng serve）或ng serve時，就會去找angular.json檔案中"projects"->"my-app"->"architect"->"serve"，而在serve中又有"options"->"browserTarget":"my-app:build",則表明在此執行"projects"->"my-app"->"architect"->"build",然後在build中的options選項中設定了入口檔案、主頁檔案、靜態檔案及目錄、樣式檔案和使用TypeScript編譯的配置檔案（tsconfig.app.json）而tsconfig.app.json檔案又繼承與tsconfig.json檔案，所以使用TypeScript編譯後就可以執行，那麼執行就是main.ts檔案入口。

21、main.ts檔案：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {//是否啟用enableProdMode模式
  enableProdMode();
}
//動態引導，引導AppModule來啟動應用程式platformBrowserDynamic().bootstrapModule相當於main函式，而AppModule是引數，
//此種方式是通過瀏覽器端編譯
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

22、在裝載AppModule時，會去找/app/app.module.ts裝載，如下程式碼：

import { BrowserModule } from '@angular/platform-browser';//匯入BrowserModule,匯入 BrowserModule 是因為它提供了啟動和執行瀏覽器應用的那些基本的服務提供商.
import { NgModule } from '@angular/core';//匯入NgModule,NgModule是我們組織Angular應用所必須的

import { AppComponent } from './app.component';//匯入AppComponent,AppComponent是我們要展現的一個最基本的元件

@NgModule({//我們在 @NgModule 的元資料中配置我們匯入的模組,因為我們需要依賴 BrowserModule 所以我們在 imports 中添加了它,然後我們又在 declarations 和 bootstrap 選項中添加了 AppComponent 元件.
  declarations: [
    AppComponent//在 declarations添加了 AppComponent 元件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]//bootstrap選項中添加了 AppComponent 元件
})
export class AppModule { }

23、在/app/app.module.ts中載入了一個AppComponent元件，是從app/app.component.ts中匯入的，如下程式碼:

import { Component } from '@angular/core';

@Component({//使用@Component裝飾器來定義一個AppComponent元件，Component元件是建立使用者介面的主要元件
  selector: 'app-root',//元件標籤，定義之後就可以在html檔案中使用<app-root></app-root>直接使用該元件了
  templateUrl: './app.component.html',//元件所使用的模板,即app.component.html檔案,UI相關
  styleUrls: ['./app.component.css']//元件所使用的樣式,即app.component.css檔案,UI相關
})
export class AppComponent {
  title = 'my-app';//標題
}

24、首先檢視app.component.html檔案，檔案內容如下，其中Welcome to {{ title }}!中的{{ title }}就是顯示在AppComponent中的title值，由程式碼可以看出值為my-app，那麼在瀏覽器中就會顯示Welcome to my-app，請看第14步截圖。

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

25、在定義好app-root標籤後，就可以在主頁index.html使用，如下程式碼所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

26、這就相當於將app.component.html內容填充到了index.html檔案中的body標籤中，然後在瀏覽器中顯示

此例是根據：https://www.angular.cn/guide/quickstart來做的。