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…