[Angular學(xué)習(xí)筆記]Angular CLI詳解【轉(zhuǎn)】

Angular CLI 是什么？

Angular CLI 是一個(gè)命令行接口(Command Line Interface)彼硫，用于實(shí)現(xiàn)自動(dòng)化開發(fā)工作流程炊豪。它允許你做以下這些事情：

創(chuàng)建一個(gè)新的 Angular 應(yīng)用程序
運(yùn)行帶有 LiveReload 支持的開發(fā)服務(wù)器，以便在開發(fā)過程中預(yù)覽應(yīng)用程序
添加功能到現(xiàn)有的 Angular 應(yīng)用程序
運(yùn)行應(yīng)用程序的單元測試
運(yùn)行應(yīng)用程序的端到端 (E2E) 測試
構(gòu)建應(yīng)用程序

在詳細(xì)介紹 Angular CLI 之前拧篮，我們先來看一下如何安裝 Angular CLI词渤。

前提條件

在使用 Angular CLI 之前，你必須確保系統(tǒng)中 Node.js 的版本高于 6.9.0 且 npm 的版本高于 3.0.0他托。

若你尚未安裝 Node.js掖肋，你可以訪問 Node.js 官網(wǎng)，然后根據(jù)你所用的操作系統(tǒng)選擇對(duì)應(yīng)的安裝方式赏参。

若你本機(jī)已經(jīng)安裝 Node.js 和 npm志笼，你可以通過運(yùn)行以下命令，確認(rèn)一下當(dāng)前環(huán)境信息：

$ node - v # 顯示當(dāng)前Node.js的版本
$ npm -v # 顯示當(dāng)前npm的版本

當(dāng)你本機(jī) Node.js 環(huán)境確認(rèn)無誤后把篓，你可以在命令行使用 npm 安裝 TypeScript：

$ npm install -g typescript # 安裝最新的TypeScript穩(wěn)定版

安裝 Angular CLI

若要安裝 Angular CLI纫溃，只需在命令行中運(yùn)行以下命令：

$ npm install -g @angular/cli

驗(yàn)證是否成功安裝 Angular CLI，可在命令行運(yùn)行：

$ ng version

在我本機(jī)運(yùn)行上述命令韧掩，則輸出以下結(jié)果：

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

安裝完 Angular CLI紊浩，接下來我們來使用它創(chuàng)建新的應(yīng)用程序。

創(chuàng)建新的 Angular 應(yīng)用程序

Angular CLI 為我們提供了兩種方式疗锐，用于創(chuàng)建新的應(yīng)用程序：

ng init - 在當(dāng)前目錄創(chuàng)建新的應(yīng)用程序
ng new - 創(chuàng)建新的目錄坊谁，然后在新建的目錄中運(yùn)行 ng init 命令

因此 ng new 與 ng init 的功能是相似的，只是 ng new 會(huì)為我們創(chuàng)建新的目錄滑臊。

假設(shè)你還未創(chuàng)建新的目錄口芍，那么我們需要使用 ng new 命令來創(chuàng)建新的項(xiàng)目：

$ ng new my-app

當(dāng)運(yùn)行上面的命令后，將發(fā)生以下事情：

新的 my-app 目錄被創(chuàng)建
應(yīng)用程序相關(guān)的源文件和目錄將會(huì)被創(chuàng)建
應(yīng)用程序的所有依賴 (package.json中配置的依賴項(xiàng)) 將會(huì)被自動(dòng)安裝
自動(dòng)配置項(xiàng)目中的 TypeScript 開發(fā)環(huán)境
自動(dòng)配置 Karma 單元測試環(huán)境
自動(dòng)配置 Protractor (end-to-end) 測試環(huán)境
創(chuàng)建 environment 相關(guān)的文件并初始化為默認(rèn)的設(shè)置

此時(shí) my-app 目錄中 Angular 應(yīng)用程序的目錄結(jié)構(gòu)如下：

.
├── 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

可用選項(xiàng)

--dry-run: boolean, 默認(rèn)為 false, 若設(shè)置 dry-run 則不會(huì)創(chuàng)建任何文件
--verbose: boolean, 默認(rèn)為 false
--link-cli: boolean, 默認(rèn)為 false, 自動(dòng)鏈接到 @angular/cli 包
--skip-install: boolean, 默認(rèn)為 false, 表示跳過 npm install
--skip-git: boolean, 默認(rèn)為 false, 表示該目錄不初始化為 git 倉庫
--skip-tests: boolean, 默認(rèn)為 false, 表示不創(chuàng)建 tests 相關(guān)文件
--skip-commit: boolean, 默認(rèn)為 false, 表示不進(jìn)行初始提交
--directory: string, 用于設(shè)置創(chuàng)建的目錄名雇卷，默認(rèn)與應(yīng)用程序的同名
--source-dir: string, 默認(rèn)為 'src', 用于設(shè)置源文件目錄的名稱
--style: string, 默認(rèn)為 'css', 用于設(shè)置選用的樣式語法 ('css', 'less' or 'scss')
--prefix: string, 默認(rèn)為 'app', 用于設(shè)置創(chuàng)建新組件時(shí)鬓椭，組件選擇器使用的前綴
--mobile: boolean, 默認(rèn)為 false,表示是否生成 Progressive Web App 應(yīng)用程序
--routing: boolean, 默認(rèn)為 false, 表示新增帶有路由信息的模塊，并添加到根模塊中
--inline-style: boolean, 默認(rèn)為 false, 表示當(dāng)創(chuàng)建新的應(yīng)用程序時(shí)关划，使用內(nèi)聯(lián)樣式
--inline-template: boolean, 默認(rèn)為 false, 表示當(dāng)創(chuàng)建新的應(yīng)用程序時(shí)小染，使用內(nèi)聯(lián)模板

除此之外，你可以在本機(jī)上運(yùn)行 ng generate --help 查看更多的可用選項(xiàng)贮折。接下來讓我們來看一下如何運(yùn)行應(yīng)用程序裤翩。

運(yùn)行應(yīng)用程序

首先進(jìn)入使用 Angular CLI 創(chuàng)建的應(yīng)用程序目錄，例如：

$ cd my-app

然后運(yùn)行：

$ ng serve

當(dāng)運(yùn)行上面的命令后脱货，將發(fā)生以下事情：

Angular CLI 從 .angular-cli.json 文件中加載配置信息
Angular CLI 運(yùn)行 Webpack 打包相關(guān) JavaScript 和 CSS 文件
Angular CLI 啟動(dòng) webpack dev server 本地開發(fā)服務(wù)器岛都，默認(rèn)的地址是 localhost:4200

若要停止應(yīng)用程序律姨，你可以使用 ctrl+c 快捷鍵振峻。

添加功能到現(xiàn)有的 Angular 應(yīng)用程序

你可以使用 ng generate 命令臼疫，為已有的 Angular 應(yīng)用程序添加新的功能。

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: 新建服務(wù)

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: 新建服務(wù)

添加新的類

為了添加類名為 UserProfile 類，我們可以運(yùn)行：

$ ng generate class user-profile

Angular CLI 會(huì)自動(dòng)調(diào)整文件名和類名的字母大小寫凤价，因此以下命令具有相同的效果：

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

運(yùn)行上述命令后鸽斟，在幕后將發(fā)生以下事情：

在 src/app 目錄下將創(chuàng)建一個(gè) user-profile.ts 文件，該文件導(dǎo)出一個(gè)名為 UserProfile 的類

可用選項(xiàng)

--spec: boolean, 默認(rèn)為 false, 表示是否生成單元測試相關(guān)的 spec 文件

使用示例

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

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

添加新的組件

若想創(chuàng)建一個(gè)選擇器為 app-site-header 的組件利诺，則可以運(yùn)行：

$ 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 將自動(dòng)調(diào)整文件名和組件名稱的字母大小寫富蓄，并將前綴應(yīng)用于組件選擇器，因此以下命令具有相同的效果：

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

運(yùn)行上述命令后慢逾，在幕后將發(fā)生以下事情：

src/app/site-header 目錄被創(chuàng)建
site-header 目錄下會(huì)生成以下四個(gè)文件：
- CSS 樣式文件立倍，用于設(shè)置組件的樣式
- HTML 模板文件，用于設(shè)置組件的模板
- TypeScript 文件侣滩，里面包含一個(gè) SiteHeaderComponent 組件類和組件的元信息
- Spec 文件口注，包含組件相關(guān)的測試用例
SiteHeaderComponent 組件會(huì)被自動(dòng)地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中。

可用選項(xiàng)

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

使用示例

# 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

添加新的指令

若想創(chuàng)建一個(gè)選擇器為 appAdminLink 的指令君珠，則可以運(yùn)行：

$ 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 將自動(dòng)調(diào)整文件名和指令名稱的字母大小寫寝志，并將前綴應(yīng)用于指令選擇器，因此以下命令具有相同的效果：

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

運(yùn)行上述命令后策添，在幕后將發(fā)生以下事情：

src/app/admin-link.directive.ts 文件被創(chuàng)建材部，該文件導(dǎo)出一個(gè)名為 AdminLinkDirective 且選擇器為 appAdminLink 的指令
src/app/admin-link.directive.spec.ts 文件被創(chuàng)建，該文件包含指令相關(guān)的單元測試信息
AdminLinkDirective 指令會(huì)被自動(dòng)地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中唯竹。

可用選項(xiàng)

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

使用示例

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

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

添加新的枚舉

若想創(chuàng)建一個(gè)名為 Direction 的枚舉類乐导，則可以運(yùn)行：

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

Angular CLI 會(huì)自動(dòng)調(diào)整文件名和枚舉名稱的字母大小寫，因此以下命令具有相同的效果：

$ ng generate enum direction
$ ng generate enum Direction

運(yùn)行上述命令后摩窃，在幕后將發(fā)生以下事情：

src/app.direction.enum.ts 文件被創(chuàng)建兽叮，該文件導(dǎo)出名為 Direction 的枚舉

添加新的模塊

若想創(chuàng)建一個(gè)新的模塊，則可以運(yùn)行：

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

運(yùn)行上述命令后猾愿，在幕后將發(fā)生以下事情：

src/app/admin 目錄被創(chuàng)建
在 src/app/admin/admin.module.ts 文件中鹦聪，AdminModule 模塊被創(chuàng)建

需要注意的是，新增的模塊不會(huì)被自動(dòng)添加到 src/app/app.module.ts 文件中的 AppModule 模塊中蒂秘，用戶可以根據(jù)具體需求導(dǎo)入對(duì)應(yīng)的模塊泽本。

若要在其它模塊中導(dǎo)入剛才新增的模塊，可以在 @NgModule 的 imports 屬性中設(shè)定該新增的模塊姻僧。具體示例如下：

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

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

可用選項(xiàng)

--routing: boolean, 默認(rèn)為 false, 表示生成一個(gè)額外包含路由信息的 AdminRoutingModule 模塊规丽，且該模塊會(huì)被自動(dòng)地導(dǎo)入到新建的模塊中
--spec: boolean, 默認(rèn)為 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

添加新的管道

若想創(chuàng)建一個(gè)名為 convertToEuro 的管道蒲牧，則可以運(yùn)行：

$ 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 會(huì)自動(dòng)調(diào)整文件名和管道名稱的字母大小寫，因此以下命令具有相同的效果：

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

運(yùn)行上述命令后赌莺，在幕后將發(fā)生以下事情：

src/app/convert-to-euro.pipe.ts 文件被創(chuàng)建冰抢，該文件導(dǎo)出一個(gè)名為 ConvertToEuroPipe 的管道類
src/app/convert-to-euro.pipe.spec.ts 文件被創(chuàng)建，該文件包含管道相關(guān)的單元測試信息
CovertToEuroPipe 管道會(huì)被自動(dòng)地添加到最近模塊 @NgModule 裝飾器的 declarations 屬性中艘狭。

可用選項(xiàng)

--flat: boolean, 默認(rèn)為 true, 表示在 src/app 目錄中生成管道而不是在 src/app/convert-to-euro 目錄下
--spec: boolean, 默認(rèn)為 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

添加新的服務(wù)

若想創(chuàng)建一個(gè)名為 BackendApiService 的服務(wù) 挎扰，則可以運(yùn)行：

$ 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 會(huì)自動(dòng)調(diào)整文件名和服務(wù)名稱的字母大小寫，因此以下命令具有相同的效果：

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

運(yùn)行上述命令后巢音，在幕后將發(fā)生以下事情：

src/app/backend-api.service 文件被創(chuàng)建遵倦，該文件導(dǎo)出一個(gè)名為 BackendApiService 的服務(wù)類
src/app/back-api.service.spec.ts 文件被創(chuàng)建，該文件包含管道相關(guān)的單元測試信息

需要注意的是官撼，Angular CLI 會(huì)提醒用戶服務(wù)已成功創(chuàng)建梧躺，但尚未配置該服務(wù)。用戶可以根據(jù)具體需求在模塊或組件的 providers 屬性中配置該新建的服務(wù)傲绣。具體示例如下：

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

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

可用選項(xiàng)

--flat: boolean, 默認(rèn)為 true, 表示在 src/app 目錄中生成服務(wù)而不是在 src/app/backend-api 目錄下
--spec: boolean, 默認(rèn)為 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

運(yùn)行單元測試

Angular CLI 在新建項(xiàng)目的時(shí)候掠哥，自動(dòng)為我們集成了 Karma test runner 測試框架。當(dāng)添加新的功能時(shí)斜筐，我們可以利用 --spec 選項(xiàng)龙致，告訴 Angular CLI 讓它為我們生成功能相關(guān)的 .spec.ts 測試單元測試文件。

spec 文件在 src 目錄中相應(yīng)功能的同一目錄下創(chuàng)建顷链，這使得我們可以在使用功能時(shí)輕松找到它們目代。

若要運(yùn)行單元測試，則可以運(yùn)行：

$ ng test

此時(shí)在你的控制臺(tái)將輸出以下信息：

$ 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

運(yùn)行上述命令后嗤练，在幕后將發(fā)生以下事情：

Angular CLI 從 .angular-cli.json 文件中加載配置信息
Angular CLI 基于 .angular-cli.json 文件中的 Karma 相關(guān)的配置信息榛了，運(yùn)行 Karma。Karma 的配置文件默認(rèn)在根目錄下煞抬，文件名為 karma.conf.js 霜大。
Karma 打開配置中設(shè)定的瀏覽器，默認(rèn)是 Chrome革答。
Karma 然后指示瀏覽器 (Chrome) 使用 Karma 配置中指定的測試框架運(yùn)行 src/test.ts战坤。默認(rèn)情況下，采用的是 Jasmine 框架残拐。創(chuàng)建應(yīng)用程序時(shí)途茫，會(huì)自動(dòng)創(chuàng)建 src/test.ts 文件。它預(yù)先配置為加載和配置測試Angular 應(yīng)用程序所需的代碼溪食，并運(yùn)行 src 目錄中以 .spec.ts 結(jié)尾的所有文件囊卜。
Karma 將測試結(jié)果報(bào)告給控制臺(tái)。
Karma 監(jiān)聽 src 目錄下的文件的變化，然后自動(dòng)運(yùn)行單元測試栅组。

運(yùn)行 End-to-End 測試

若要運(yùn)行 e2e 測試雀瓢，則可以運(yùn)行：

$ ng e2e

構(gòu)建應(yīng)用程序

若要構(gòu)建應(yīng)用程序，則可以運(yùn)行：

$ ng build

運(yùn)行上述命令后玉掸，在幕后將發(fā)生以下事情：

Angular CLI 從 .angular-cli.json 文件中加載配置信息
Angular CLI 運(yùn)行 Webpack 打包項(xiàng)目相關(guān)的 JavaScript 與 CSS 文件
打包后的資源刃麸，將被輸出到配置文件中 outDir 所指定的目錄，默認(rèn)是輸出到 dist 目錄

可用選項(xiàng)

--aot: 開啟 ahead-of-time 編譯
--base-href: string, 設(shè)置 index.html 文件中 <base> 元素的鏈接地址
--environment: string, 設(shè)置所使用的環(huán)境排截，默認(rèn)為 dev
--output-path: string, 設(shè)置輸出的路徑
--target: string, 設(shè)置所使用的環(huán)境嫌蚤，默認(rèn)為 development
--watch: boolean, 默認(rèn)為 false, 開啟 watch 模式辐益，監(jiān)聽文件異動(dòng)并自動(dòng)重新構(gòu)建

Targets

指定 target 的值断傲，會(huì)影響到構(gòu)建流程的運(yùn)行方式。它的可選值：

development: 默認(rèn)的模式智政，意味著不進(jìn)行代碼壓縮或混淆
production: 壓縮和混淆代碼

若需使用 production 模式认罩，構(gòu)建應(yīng)用程序，則可以運(yùn)行：

$ ng build --target=production

Environments

Environments 讓你能夠自定義應(yīng)用程序行為续捂。

你可以在 .angular-cli.json 文件中定義自己的 environments 文件垦垂。默認(rèn)的是：

dev：environments/environment.ts

export const environment = {
  production: false
};

prod：environments/environment.prod.ts

export const environment = {
  production: true
};

需要注意的是，構(gòu)建流程默認(rèn)使用 dev 環(huán)境牙瓢。

如果指定了不同的環(huán)境劫拗，構(gòu)建過程將使用相應(yīng)的環(huán)境：

# 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 文件中看到的，通過導(dǎo)入 ./environments/environment 文件矾克，我們就可以訪問到 environment 相關(guān)的配置信息页慷，具體如下：

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

自定義構(gòu)建流程

從 v1.0 開始，Angular CLI 提供了一個(gè)命令胁附，用于將你的應(yīng)用程序與 Angular CLI 分離酒繁。

默認(rèn)情況下，Angular CLI 為您管理基礎(chǔ) Webpack 配置控妻，因此您無需處理其復(fù)雜性州袒。如果你希望手動(dòng)配置webpack，并且您不再需要在Angular應(yīng)用程序中使用Angular CLI弓候，則可以運(yùn)行：

$ ng eject

此時(shí)在你的控制臺(tái)將輸出以下信息：

==========================================================================================
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".

運(yùn)行上述命令后郎哭，在幕后將發(fā)生以下事情：

ejected: true 的屬性被添加到 .angular-cli.json 文件中
在應(yīng)用程序的根目錄下將生成獨(dú)立的 webpack.config.js 文件，因此你可以在沒有使用 Angular CLI 的環(huán)境下構(gòu)建項(xiàng)目
package.json 中的構(gòu)建腳本會(huì)被更新菇存，因此你可以運(yùn)行 npm run build 來構(gòu)建項(xiàng)目
package.json 中的測試腳本會(huì)被更新夸研，因此你可以運(yùn)行 npm run test 來運(yùn)行單元測試
package.json 中的啟動(dòng)腳本會(huì)被更新，因此你可以運(yùn)行 npm run start 或 npm start 來啟動(dòng)開發(fā)服務(wù)器
package.json 中的 e2e 腳本會(huì)被更新撰筷，因此你可以運(yùn)行 npm run e2e 來運(yùn)行 End-to-End 測試

把應(yīng)用程序與 Angular CLI 分離后陈惰，你就可以根據(jù)自己的要求自定義 Webpack 的配置。

文章轉(zhuǎn)載自 Angular CLI 終極指南

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市抬闯，隨后出現(xiàn)的幾起案子井辆，更是在濱河造成了極大的恐慌，老刑警劉巖溶握，帶你破解...
沈念sama閱讀 219,427評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件杯缺，死亡現(xiàn)場離奇詭異，居然都是意外死亡睡榆，警方通過查閱死者的電腦和手機(jī)萍肆，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,551評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來胀屿，“玉大人塘揣，你說我怎么就攤上這事∷拚福” “怎么了亲铡？”我有些...
開封第一講書人閱讀 165,747評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長葡兑。經(jīng)常有香客問我奖蔓，道長，這世上最難降的妖魔是什么讹堤？我笑而不...
開封第一講書人閱讀 58,939評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任吆鹤，我火速辦了婚禮，結(jié)果婚禮上洲守，老公的妹妹穿的比我還像新娘疑务。我一直安慰自己，他們只是感情好岖沛，可當(dāng)我...
茶點(diǎn)故事閱讀 67,955評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布暑始。她就那樣靜靜地躺著，像睡著了一般婴削。火紅的嫁衣襯著肌膚如雪廊镜。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,737評(píng)論 1贊 305
城市分裂傳說
那天唉俗，我揣著相機(jī)與錄音嗤朴，去河邊找鬼。笑死虫溜，一個(gè)胖子當(dāng)著我的面吹牛雹姊，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播衡楞，決...
沈念sama閱讀 40,448評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼吱雏，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起歧杏，我...
開封第一講書人閱讀 39,352評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤镰惦，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后犬绒，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體旺入，經(jīng)...
沈念sama閱讀 45,834評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,992評(píng)論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年凯力，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了茵瘾。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,133評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡咐鹤，死狀恐怖拗秘，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情慷暂，我是刑警寧澤聘殖，帶...
沈念sama閱讀 35,815評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站行瑞，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏餐禁。R本人自食惡果不足惜血久，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,477評(píng)論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望帮非。院中可真熱鬧氧吐，春花似錦、人聲如沸末盔。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,022評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽陨舱。三九已至翠拣，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間游盲，已是汗流浹背误墓。一陣腳步聲響...
開封第一講書人閱讀 33,147評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留益缎，地道東北人谜慌。一個(gè)月前我還...
沈念sama閱讀 48,398評(píng)論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像莺奔，于是被迫代替她去往敵國和親欣范。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,077評(píng)論 2贊 355

[Angular學(xué)習(xí)筆記]Angular CLI詳解【轉(zhuǎn)】

Angular CLI 是什么？

前提條件

安裝 Angular CLI

創(chuàng)建新的 Angular 應(yīng)用程序

可用選項(xiàng)

運(yùn)行應(yīng)用程序

添加功能到現(xiàn)有的 Angular 應(yīng)用程序

添加新的類

可用選項(xiàng)

使用示例

添加新的組件

可用選項(xiàng)

使用示例

添加新的指令

可用選項(xiàng)

使用示例

添加新的枚舉

添加新的模塊

可用選項(xiàng)

使用示例

添加新的管道

可用選項(xiàng)

使用示例

添加新的服務(wù)

可用選項(xiàng)

使用示例

運(yùn)行單元測試

運(yùn)行 End-to-End 測試

構(gòu)建應(yīng)用程序

可用選項(xiàng)

Targets

Environments

自定義構(gòu)建流程

文章轉(zhuǎn)載自 Angular CLI 終極指南

推薦閱讀更多精彩內(nèi)容