【2019-10-16】建立工做空間、應用，庫時，自動生成的文件結構

建立工做空間、應用，庫時，自動生成的文件結構

一、建立工做空間

Step1：命令：ng new my-workspace --createApplication="false"

每一個工做空間中的全部項目共享一個CLI配置環境，該工做空間的頂層包含着全工做空間級的配置文件

Step2：生產的文件項有：

node_modules

.editorconfig

.gitignore

angular.json

package-lock.json //提供npm客戶端安裝到node_modules的全部軟件包的版本信息

package.json //配置工做空間中全部項目可用的npm包依賴

README.md

tsconfig.json // 工做空間中各個項目的默認TypeScript 配置 ,若是每一個項目的此配置文件不一樣，可刪除這裏的文件，單獨在項目中進行配置

tslint.json // 工做空間中各個項目的默認TSLint 配置，若是每一個項目的此配置文件不一樣，可刪除這裏的文件，單獨在項目中進行配置

二、建立應用

Case1 : 建立工做空間的同時建立應用

Step1：命令：ng new my-app // 在建立工做空間的同時，並在src文件夾下爲工做空間頂層的根應用生成一個新的應用骨架。新生成的應用包含一個根模塊的源文件，包括一個根組件及其模板

Step2：生產的文件項有：

e2e //組針對根應用的端到端測試的源文件，以及測試專屬的配置文件。

node_modules

src
--app //包含定義應用邏輯和數據的組件文件
-- app-routing.module.ts
-- app.component.html
-- app.component.scss
-- app.component.ts //爲應用的根組件定義邏輯，名爲 AppComponent
-- app.component.spec.ts //爲根組件 AppComponent 定義了一個單元測試。
-- app.module.ts //定義了名爲 AppModule 的根模塊，它會告訴 Angular 如何組裝應用。這裏最初只聲明一個 AppComponent。當你嚮應用中添加更多組件時，它們也必須在這裏聲明。
--assets //包含要在構建應用時應該按原樣複製的圖像和其它靜態資源文件。

--environments //包含特定目標環境的構建配置選項。默認狀況下，有一個無名的標準開發環境和一個生產（「prod」）環境。你還能夠定義其它的目標環境配置。
-- environment.prod.ts
-- environment.ts

--favicon.ico //用做該應用在標籤欄中的圖標。

--index.html //當有人訪問你的站點時，提供服務的主要HTML頁面。CLI會在構建你的應用時自動添加全部的JavaScript和CSS文件，因此你一般不用手動添加任何<script> 或 <link> 標籤。

--main.ts //應用的切入點，用JIT編譯器編譯應用時，而後引導應用的根模塊在瀏覽器中運行，你也能夠在不改變任何代碼的狀況下改用AOT編譯器，只要在CLI的build和serve命令中加上--aot標誌就能夠了。

--polyfills.ts // Provides polyfill scripts for browser support.
--styles.scss // 列出爲項目提供樣式的 CSS 文件。該擴展還反映了你爲該項目配置的樣式預處理器。
--test.ts //單元測試的主入口點，帶有一些Angular特有的配置。你一般不須要編輯這個文件。

.editorconfig

.gitignore

angular.json

browserslist //配置各類前端工具之間共享的目標瀏覽器和 Node.js 版本。

karma.conf.js

package-lock.json

package.json

README.md

tsconfig.app.json // 應用專屬的 TypeScript 配置，包括 TypeScript 和 Angular 模板編譯器的選項

tsconfig.json

tsconfig.spec.json //應用測試的 TypeScript 配置

tslint.json //應用專屬的 TSLint 配置。

Case2： 單首創建應用

Step1： 命令： ng generate application my-app // 須要進入一個已有的工做空間，纔可使用該命令

//會在頂層建立一個projects目錄，目錄下建立my-app應用

Step2: projects/my-app下的文件項有：

e2e

src // is same as src in the Case1

browserslist

karma.conf.js

tsconfig.app.json

tsconfig.spec.json

tslint.json

三、建立庫

Step1：命令：ng generate library my-library // 須要進入一個已有的工做空間，纔可使用該命令

//若頂層不存在projects目錄，則會自動建立一個projects目錄，目錄下建立my-library庫

Step2: projects/my-library下的文件項有：

src
--lib // 包含庫項目的邏輯和數據像應用項目同樣，庫項目也能夠包含組件，服務，模塊，指令和管道
-- my-library.component.spec.ts
-- my-library.component.ts
-- my-library.module.ts
-- my-library.service.spec.ts
-- my-library.service.ts
--public-api.ts // 指定從庫中導出的全部文件

--test.ts //單元測試的主要入口點是一些庫專屬的配置。你一般不用編輯這個文件。

karma.conf.js // 庫專屬的 Karma 配置。

ng-package.json // 構建庫時，ng-packagr 用到的配置文件。

package.json //配置這個庫所需的 npm 包依賴。

README.md

tsconfig.lib.json //庫專屬的 TypeScript 配置，包括 TypeScript 和 Angular 模板編譯器選項。

tsconfig.spec.json //測試庫時用到的 TypeScript 配置

tslint.json