Angular CLI 終極指南

時間 2019-11-06

標籤 angular cli 終極指南欄目 AngularJS 简体版

原文原文鏈接

閱讀 Angular 6/RxJS 最新教程，請訪問前端修仙之路

Angular CLI 是什麼？

Angular CLI 是一個命令行接口(Command Line Interface)，用於實現自動化開發工做流程。它容許你作如下這些事情：css

建立一個新的 Angular 應用程序
運行帶有 LiveReload 支持的開發服務器，以便在開發過程當中預覽應用程序
添加功能到現有的 Angular 應用程序
運行應用程序的單元測試
運行應用程序的端到端 (E2E) 測試
構建應用程序

在詳細介紹 Angular CLI 以前，咱們先來看一下如何安裝 Angular CLI。html

前提條件

在使用 Angular CLI 以前，你必須確保系統中 Node.js 的版本高於 6.9.0 且 npm 的版本高於 3.0.0。前端

若你還沒有安裝 Node.js，你能夠訪問 Node.js 官網，而後根據你所用的操做系統選擇對應的安裝方式。node

若你本機已經安裝 Node.js 和 npm，你能夠經過運行如下命令，確認一下當前環境信息：webpack

$ node - v # 顯示當前Node.js的版本
$ npm -v # 顯示當前npm的版本

當你本機 Node.js 環境確認無誤後，你能夠在命令行使用 npm 安裝 TypeScript：git

$ npm install -g typescript # 安裝最新的TypeScript穩定版

安裝 Angular CLI

若要安裝 Angular CLI，只需在命令行中運行如下命令：github

$ npm install -g @angular/cli

驗證是否成功安裝 Angular CLI，可在命令行運行：web

$ ng version

在我本機運行上述命令，則輸出如下結果：typescript

@angular/cli: 1.1.1
node: 6.10.2
os: darwin x64

安裝完 Angular CLI，接下來咱們來使用它建立新的應用程序。shell

建立新的 Angular 應用程序

Angular CLI 爲咱們提供了兩種方式，用於建立新的應用程序：

ng init - 在當前目錄建立新的應用程序
ng new - 建立新的目錄，而後在新建的目錄中運行 ng init 命令

所以 ng new 與 ng init 的功能是類似的，只是 ng new 會爲咱們建立新的目錄。

假設你還未建立新的目錄，那麼咱們須要使用 ng new 命令來建立新的項目：

$ ng new my-app

當運行上面的命令後，將發生如下事情：

新的 my-app 目錄被建立
應用程序相關的源文件和目錄將會被建立
應用程序的全部依賴 (package.json中配置的依賴項) 將會被自動安裝
自動配置項目中的 TypeScript 開發環境
自動配置 Karma 單元測試環境
自動配置 Protractor (end-to-end) 測試環境
建立 environment 相關的文件並初始化爲默認的設置

此時 my-app 目錄中 Angular 應用程序的目錄結構以下：

.
├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

可用選項

--dry-run: boolean, 默認爲 false, 若設置 dry-run 則不會建立任何文件
--verbose: boolean, 默認爲 false
--link-cli: boolean, 默認爲 false, 自動連接到 @angular/cli 包
--skip-install: boolean, 默認爲 false, 表示跳過 npm install
--skip-git: boolean, 默認爲 false, 表示該目錄不初始化爲 git 倉庫
--skip-tests: boolean, 默認爲 false, 表示不建立 tests 相關文件
--skip-commit: boolean, 默認爲 false, 表示不進行初始提交
--directory: string, 用於設置建立的目錄名，默認與應用程序的同名
--source-dir: string, 默認爲 'src', 用於設置源文件目錄的名稱
--style: string, 默認爲 'css', 用於設置選用的樣式語法 ('css', 'less' or 'scss')
--prefix: string, 默認爲 'app', 用於設置建立新組件時，組件選擇器使用的前綴
--mobile: boolean, 默認爲 false,表示是否生成 Progressive Web App 應用程序
--routing: boolean, 默認爲 false, 表示新增帶有路由信息的模塊，並添加到根模塊中
--inline-style: boolean, 默認爲 false, 表示當建立新的應用程序時，使用內聯樣式
--inline-template: boolean, 默認爲 false, 表示當建立新的應用程序時，使用內聯模板

除此以外，你能夠在本機上運行 ng generate --help 查看更多的可用選項。接下來讓咱們來看一下如何運行應用程序。

運行應用程序

首先進入使用 Angular CLI 建立的應用程序目錄，例如：

$ cd my-app

而後運行：

$ ng serve

當運行上面的命令後，將發生如下事情：

Angular CLI 從 .angular-cli.json 文件中加載配置信息
Angular CLI 運行 Webpack 打包相關 JavaScript 和 CSS 文件
Angular CLI 啓動 webpack dev server 本地開發服務器，默認的地址是 localhost:4200

若要中止應用程序，你可使用 ctrl+c 快捷鍵。

添加功能到現有的 Angular 應用程序

你可使用 ng generate 命令，爲已有的 Angular 應用程序添加新的功能。

ng generate class my-new-class: 新建 class
ng generate component my-new-component: 新建組件
ng generate directive my-new-directive: 新建指令
ng generate enum my-new-enum: 新建枚舉
ng generate module my-new-module: 新建模塊
ng generate pipe my-new-pipe: 新建管道
ng generate service my-new-service: 新建服務

ng generate 命令與其它的子命令同樣，也有快捷鍵，具體以下：

ng g cl my-new-class: 新建 class
ng g c my-new-component: 新建組件
ng g d my-new-directive: 新建指令
ng g e my-new-enum: 新建枚舉
ng g m my-new-module: 新建模塊
ng g p my-new-pipe: 新建管道
ng g s my-new-service: 新建服務

添加新的類

爲了添加類名爲 UserProfile 類，咱們能夠運行：

$ ng generate class user-profile

Angular CLI 會自動調整文件名和類名的字母大小寫，所以如下命令具備相同的效果：

$ ng generate class user-profile
$ ng generate class userProfile
$ ng generate class UserProfile

運行上述命令後，在幕後將發生如下事情：

在 src/app 目錄下將建立一個 user-profile.ts 文件，該文件導出一個名爲 UserProfile 的類

可用選項

--spec: boolean, 默認爲 false, 表示是否生成單元測試相關的 spec 文件

使用示例

# Generate class 'UserProfile'
$ ng generate class user-profile

# Generate class 'UserProfile' with unit test
$ ng generate class user-profile --spec

添加新的組件

若想建立一個選擇器爲 app-site-header 的組件，則能夠運行：

$ ng generate component site-header
installing component
  create src/app/site-header/site-header.component.css
  create src/app/site-header/site-header.component.html
  create src/app/site-header/site-header.component.spec.ts
  create src/app/site-header/site-header.component.ts
  update src/app/app.module.ts

Angular CLI 將自動調整文件名和組件名稱的字母大小寫，並將前綴應用於組件選擇器，所以如下命令具備相同的效果：

$ ng generate component site-header
$ ng generate component siteHeader
$ ng generate component SiteHeader

運行上述命令後，在幕後將發生如下事情：

src/app/site-header 目錄被建立
site-header 目錄下會生成如下四個文件：
- CSS 樣式文件，用於設置組件的樣式
- HTML 模板文件，用於設置組件的模板
- TypeScript 文件，裏面包含一個 SiteHeaderComponent 組件類和組件的元信息
- Spec 文件，包含組件相關的測試用例
SiteHeaderComponent 組件會被自動地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中。

可用選項

--flat: boolean, 默認爲 false, 表示在 src/app 目錄下生成組件而不是在 src/app/site-header 目錄中
--inline-template: boolean, 默認爲 false, 表示使用內聯模板而不是使用獨立的模板文件
--inline-style: boolean, 默認爲 false, 表示使用內聯樣式而不是使用獨立的樣式文件
--prefix: boolean, 默認爲 true, 使用 .angular-cli.json 配置的前綴做爲組件選擇器的前綴
--spec: boolean, 默認爲 true, 表示生成包含單元測試的 spec 文件
--view-encapsulation: string, 用於設置組件的視圖封裝策略
--change-detection: string, 用於設置組件的變化檢測策略

使用示例

# Generate component 'site-header'
$ ng generate component site-header

# Generate component 'site-header' with inline template and inline styles
$ ng generate component site-header --inline-template --inline-style

添加新的指令

若想建立一個選擇器爲 appAdminLink 的指令，則能夠運行：

$ ng generate directive admin-link
installing directive
  create src/app/admin-link.directive.spec.ts
  create src/app/admin-link.directive.ts
  update src/app/app.module.ts

Angular CLI 將自動調整文件名和指令名稱的字母大小寫，並將前綴應用於指令選擇器，所以如下命令具備相同的效果：

$ ng generate directive admin-link
$ ng generate directive adminLink
$ ng generate directive AdminLink

運行上述命令後，在幕後將發生如下事情：

src/app/admin-link.directive.ts 文件被建立，該文件導出一個名爲 AdminLinkDirective 且選擇器爲 appAdminLink 的指令
src/app/admin-link.directive.spec.ts 文件被建立，該文件包含指令相關的單元測試信息
AdminLinkDirective 指令會被自動地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中。

可用選項

--flat: boolean, 默認爲 true, 表示在 src/app 目錄中生成指令而不是在 src/app/admin-link 目錄下
--prefix: boolean, 默認爲 true, 使用 .angular-cli.json 配置的前綴做爲指令選擇器的前綴
--spec: boolean, 默認爲 true, 表示生成包含單元測試的 spec 文件

使用示例

# Generate directive 'adminLink'
$ ng generate directive admin-link

# Generate directive 'adminLink' without unit test
$ ng generate directive admin-link --spec=false

添加新的枚舉

若想建立一個名爲 Direction 的枚舉類，則能夠運行：

$ ng generate enum direction
installing enum
  create src/app/direction.enum.ts

Angular CLI 會自動調整文件名和枚舉名稱的字母大小寫，所以如下命令具備相同的效果：

$ ng generate enum direction
$ ng generate enum Direction

運行上述命令後，在幕後將發生如下事情：

src/app.direction.enum.ts 文件被建立，該文件導出名爲 Direction 的枚舉

添加新的模塊

若想建立一個新的模塊，則能夠運行：

$ ng generate module admin
installing module
  create src/app/admin/admin.module.ts

運行上述命令後，在幕後將發生如下事情：

src/app/admin 目錄被建立
在 src/app/admin/admin.module.ts 文件中，AdminModule 模塊被建立

須要注意的是，新增的模塊不會被自動添加到 src/app/app.module.ts 文件中的 AppModule 模塊中，用戶能夠根據具體需求導入對應的模塊。

若要在其它模塊中導入剛纔新增的模塊，能夠在 @NgModule 的 imports 屬性中設定該新增的模塊。具體示例以下：

import { AdminModule } from './admin/admin.module';

@NgModule({
  // ...
  imports: [
    AdminModule
  ]
})
export class AppModule { }

可用選項

--routing: boolean, 默認爲 false, 表示生成一個額外包含路由信息的 AdminRoutingModule 模塊，且該模塊會被自動地導入到新建的模塊中
--spec: boolean, 默認爲 false, 表示添加 src/app/admin/admin.module.spec.ts 單元測試文件

使用示例

# Add module 'admin'
$ ng generate module admin

# Add module 'admin' with additional module containing routing information
$ ng generate module admin --routing

添加新的管道

若想建立一個名爲 convertToEuro 的管道，則能夠運行：

$ ng generate pipe convert-to-euro
installing pipe
  create src/app/convert-to-euro.pipe.spec.ts
  create src/app/convert-to-euro.pipe.ts
  update src/app/app.module.ts

Angular CLI 會自動調整文件名和管道名稱的字母大小寫，所以如下命令具備相同的效果：

$ ng generate pipe convert-to-euro
$ ng generate pipe convertToEuro
$ ng generate pipe ConvertToEuro

運行上述命令後，在幕後將發生如下事情：

src/app/convert-to-euro.pipe.ts 文件被建立，該文件導出一個名爲 ConvertToEuroPipe 的管道類
src/app/convert-to-euro.pipe.spec.ts 文件被建立，該文件包含管道相關的單元測試信息
CovertToEuroPipe 管道會被自動地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中。

可用選項

--flat: boolean, 默認爲 true, 表示在 src/app 目錄中生成管道而不是在 src/app/convert-to-euro 目錄下
--spec: boolean, 默認爲 true, 表示生成包含單元測試的 spec 文件

使用示例

# Generate pipe 'convertToEuro' with spec and in /src/app directory
$ ng generate pipe convert-to-euro

# Generate pipe 'convertToEuro' without spec and in /src/app/convert-to-euro directory
$ ng generate pipe convert-to-euro --spec=false --flat=false

添加新的服務

若想建立一個名爲 BackendApiService 的服務，則能夠運行：

$ ng generate service backend-api
installing service
  create src/app/backend-api.service.spec.ts
  create src/app/backend-api.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

Angular CLI 會自動調整文件名和服務名稱的字母大小寫，所以如下命令具備相同的效果：

$ ng generate service backend-api
$ ng generate service backendApi
$ ng generate service BackendApi

運行上述命令後，在幕後將發生如下事情：

src/app/backend-api.service 文件被建立，該文件導出一個名爲 BackendApiService 的服務類
src/app/back-api.service.spec.ts 文件被建立，該文件包含管道相關的單元測試信息

須要注意的是，Angular CLI 會提醒用戶服務已成功建立，但還沒有配置該服務。用戶能夠根據具體需求在模塊或組件的 providers 屬性中配置該新建的服務。具體示例以下：

import { BackendApiService } from './backend-api.service';

@NgModule({
  // ...
  providers: [BackendApiService],
  bootstrap: [AppComponent]
})

可用選項

--flat: boolean, 默認爲 true, 表示在 src/app 目錄中生成服務而不是在 src/app/backend-api 目錄下
--spec: boolean, 默認爲 true, 表示生成包含單元測試的 spec 文件

使用示例

# Generate service with DI token 'BackendApiService' in /src/app directory
$ ng generate service backend-api

# Generate service with DI token 'BackendApiService' in /src/app/backend-api directory
$ ng generate service backend-api --flat=false

運行單元測試

Angular CLI 在新建項目的時候，自動爲咱們集成了 Karma test runner 測試框架。當添加新的功能時，咱們能夠利用 --spec 選項，告訴 Angular CLI 讓它爲咱們生成功能相關的 .spec.ts 測試單元測試文件。

spec 文件在 src 目錄中相應功能的同一目錄下建立，這使得咱們能夠在使用功能時輕鬆找到它們。

若要運行單元測試，則能夠運行：

$ ng test

此時在你的控制檯將輸出如下信息：

$ ng test
[karma]: No captured browser, open http://localhost:9876/
[karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome

運行上述命令後，在幕後將發生如下事情：

Angular CLI 從 .angular-cli.json 文件中加載配置信息
Angular CLI 基於 .angular-cli.json 文件中的 Karma 相關的配置信息，運行 Karma。Karma 的配置文件默認在根目錄下，文件名爲 karma.conf.js 。
Karma 打開配置中設定的瀏覽器，默認是 Chrome。
Karma 而後指示瀏覽器 (Chrome) 使用 Karma 配置中指定的測試框架運行 src/test.ts。默認狀況下，採用的是 Jasmine 框架。建立應用程序時，會自動建立 src/test.ts 文件。它預先配置爲加載和配置測試Angular 應用程序所需的代碼，並運行 src 目錄中以 .spec.ts 結尾的全部文件。
Karma 將測試結果報告給控制檯。
Karma 監聽 src 目錄下的文件的變化，而後自動運行單元測試。

運行 End-to-End 測試

若要運行 e2e 測試，則能夠運行：

$ ng e2e

構建應用程序

若要構建應用程序，則能夠運行：

$ ng build

運行上述命令後，在幕後將發生如下事情：

Angular CLI 從 .angular-cli.json 文件中加載配置信息
Angular CLI 運行 Webpack 打包項目相關的 JavaScript 與 CSS 文件
打包後的資源，將被輸出到配置文件中 outDir 所指定的目錄，默認是輸出到 dist 目錄

可用選項

--aot: 開啓 ahead-of-time 編譯
--base-href: string, 設置 index.html 文件中 <base> 元素的連接地址
--environment: string, 設置所使用的環境，默認爲 dev
--output-path: string, 設置輸出的路徑
--target: string, 設置所使用的環境，默認爲 development
--watch: boolean, 默認爲 false, 開啓 watch 模式，監聽文件異動並自動從新構建

Targets

指定 target 的值，會影響到構建流程的運行方式。它的可選值：

development: 默認的模式，意味着不進行代碼壓縮或混淆
production: 壓縮和混淆代碼

若需使用 production 模式，構建應用程序，則能夠運行：

$ ng build --target=production

Environments

Environments 讓你可以自定義應用程序行爲。

你能夠在 .angular-cli.json 文件中定義本身的 environments 文件。默認的是：

dev：environments/environment.ts

export const environment = {
  production: false
};

prod：environments/environment.prod.ts

export const environment = {
  production: true
};

須要注意的是，構建流程默認使用 dev 環境。

若是指定了不一樣的環境，構建過程將使用相應的環境：

# Uses environments/environment.ts
$ ng build

# Also uses environments/environment.ts
$ ng build --environment=dev
$ ng build --env=dev

# Uses environments/environment.prod.ts
$ ng build --environment=prod
$ ng build --env=prod

正如你在 src/main.ts 文件中看到的，經過導入 ./environments/environment 文件，咱們就能夠訪問到 environment 相關的配置信息，具體以下：

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();
}

platformBrowserDynamic().bootstrapModule(AppModule);

自定義構建流程

從 v1.0 開始，Angular CLI 提供了一個命令，用於將你的應用程序與 Angular CLI 分離。

默認狀況下，Angular CLI 爲您管理基礎 Webpack 配置，所以您無需處理其複雜性。若是你但願手動配置webpack，而且您再也不須要在Angular應用程序中使用Angular CLI，則能夠運行：

$ ng eject

此時在你的控制檯將輸出如下信息：

==========================================================================================
Ejection was successful.

To run your builds, you now need to do the following commands:
   - "npm run build" to build.
   - "npm run test" to run unit tests.
   - "npm start" to serve the app using webpack-dev-server.
   - "npm run e2e" to run protractor.

Running the equivalent CLI commands will result in an error.

==========================================================================================
Some packages were added. Please run "npm install".

運行上述命令後，在幕後將發生如下事情：