Angular Workspace and Projects

在Angular CLI的V6版本中，首次出現了Workspace的概念，經過angular-cli構建anngular項目的再也不是一個單純的application。隨着angular-cli.json被angular。json取代，angular開始支持多項目的workspace，除了主項目目錄下的app外，用戶可根據本身的須要去豐富本身的workspace，每一個project均可以根據須要進行配置，例如用戶可建立內部的component-library，以及可單獨運行的sub-project等。

init project

此文基於 Angular CLI version 6.0.7 進行項目的搭建。 首先，初始化workspace：

ng new reina-workspace
複製代碼

項目初始化完成後，找到根目錄下的angular.json文件，其中最外層是對整個workspace的配置信息，另外包含一個projects對象，其主要結構以下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "reina-workspace": {
      ......
    },
    "reina-workspace-e2e": {
      ......
    }
  },
  "defaultProject": "reina-workspace"
}
複製代碼

• $schema: 對該workspace下的ng生成命令進行個性化配置。
• version: 版本信息。
• newProjectRoot: 新建application或library的目錄，默認指向的是src/projects目錄。
• defaultProject: 默認項目，經過ng new建立的application會被默認設置爲默認項目，可將其更改成projects中的其餘application。

在projects目錄下，默認會生成兩個project，一個對應defaultProject，另外一個是對應的e2e測試項目，可根據須要對每一個project進行配置，其主要有如下參數：

"reina-workspace": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": { ...... },
        "serve": { ...... },
        "extract-i18n": { ...... },
        "test": { ...... },
        "lint": { ...... }
      }
    },
複製代碼

• root: 指定項目的根目錄
• sourceRoot: 項目源文件的位置
• projectType: 項目的類型，application or library
• prefix: component或diractive的默認前綴，默認爲app，可自定義
• schematics: 可對單獨對內部項目的ng生成命令進行個性化配置
• architect: 對各個單獨配置project的自動化命令，如build,serve,lint,test等。

項目初始化完成後，在package.json文件中，會默認生成以下的script對象，可經過ng serve啓動默認項目，一樣能夠運行ng serve/ng build等命令，其都會對應到上述project的architect配置中。

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
複製代碼

ng generate application

瞭解完項目的基本結構以後，嘗試建立projects目錄下的第一個application，控制檯中運行如下命令：

ng generate application first-app
複製代碼

執行完成後，在projects目錄下成功生成了兩個project，分別爲‘first-app’和‘first-app-e2e’,此時查看angular.json文件，發如今projects中自動添加了兩個project:

"projects": {
    "reina-workspace": { ...... },
    "reina-workspace-e2e": { ...... },
    "first-app": { ...... },
    "first-app-e2e": { ...... }
  }
複製代碼

能夠經過ng serve first-app來啓動該項目，也可經過ng build first-app命令對項目進行build,固然，也能夠在package.json的script中添加相應的配置，如添加如下代碼，經過npm run start-first-app命令啓動first-app.

"start-first-app": "ng serve first-app"
複製代碼

ng generate library

一樣，咱們能夠經過ng generate library命令，構建內部的library，在控制檯中運行如下命令:

ng generate library first-library
複製代碼

執行完成後，在projects目錄下又生成了一個名爲first-library的project，library不會生成測試文件，此時查看angular.json文件，發如今projects中自動添加了一個project:

"projects": {
    "reina-workspace": { ...... },
    "reina-workspace-e2e": { ...... },
    "first-app": { ...... },
    "first-app-e2e": { ...... },
    "first-library": { ...... }
  }
複製代碼

一樣，咱們能夠經過ng build first-library命令進行build, build完成後，則能夠將其引入到application中使用。在first-app/src/app/app.module.ts中引入FirstLibraryModule(import { FirstLibraryModule } from 'first-·library'),經過這種方式，就能夠first-app項目中正常使用first-library庫了。 注意，library需先通過build後使用，能夠經過在package.json中配置npm的&操做符配置多命令的快捷啓動方式。如：

"launch":'ng build first-library && ng serve first-app' 
複製代碼

github: github.com/sunrun93/re…