使用Nx开始进行Angular + NestJS全栈Web应用开发

本文是2019年Angular #2 Advent Calendar第9天的文章。

我对今年在ng-japan上发布的”Angular + NestJS”很感兴趣，所以尝试了一下。

创建工作区

使用create-nx-workspace命令创建工作区。

$ npx create-nx-workspace

请指定工作区名称，并选择“angular-nest”作为模板。

$ npx create-nx-workspace
? Workspace name (e.g., org name)     workspace
? What to create in the new workspace 
  empty             [an empty workspace] 
  web components    [a workspace with a single app built using web components] 
  angular           [a workspace with a single Angular application] 
❯ angular-nest      [a workspace with a full stack application (Angular + Nest)]
  react             [a workspace with a single React application] 
  react-express     [a workspace with a full stack application (React + Express)
(Move up and down to reveal more choices)
? Application name                    web
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com ]

用 Angular 和 NestJS，仅仅这些就可以搭建起环境。

启动应用程序

您可以使用 “nx serve <项目名称>” 来启动每个应用程序。

$ npm run nx serve api
$ npm run nx serve web

项目结构

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Message } from '@workspace/api-interfaces';

@Component({...})
export class AppComponent {
  hello$ = this.http.get<Message>('/api/hello');
  constructor(private http: HttpClient) {}
}

增加应用程序

您可以使用以下命令添加应用程序。

$ npm run ng g @nrwl/angular:app <アプリケーション名>

生成的应用程序默认使用Jest和Cypress进行单元测试和端到端测试。

添加图书馆

你可以使用以下命令来添加库。在应用程序之间共享使用的服务和组件会很好。

$ npm run ng g @nrwl/angular:lib <ライブラリ名>

在生成库时，tsconfig.json的别名设置也会自动添加。

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    (中略)
    "baseUrl": ".",
    "paths": {
      "@workspace/api-interfaces": ["libs/api-interfaces/src/index.ts"],
      "@workspace/ui": ["libs/ui/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

添加原理图

Nx的有趣之处在于可以在不进行额外安装或配置的情况下创建和执行原理图。

$ npm run ng g workspace-schematic

执行”ng g workspace-schematic”命令将会生成schema.json和index.json。

以下是一个示例，展示了用于生成src/environments/envirnment.ts的Schematic。如果构建中需要包含API密钥等信息，但又不想将其放在版本控制下，使用Schematic生成可能是一种选择。

{
  "$schema": "http://json-schema.org/schema",
  "id": "environment",
  "type": "object",
  "properties": {
    "project": {
      "type": "string",
      "description": "Name of the project.",
      "x-prompt": "Which project would you like to add environment variables?"
    },
    "production": {
      "type": "boolean",
      "description": "Production",
      "default": false
    },
    "apiToken": {
      "type": "string",
      "description": "API token"
    },
  },
  "required": ["project"]
}

import { strings } from '@angular-devkit/core';
import { Rule, SchematicContext, apply, applyTemplates, mergeWith, mov, url } from '@angular-devkit/schematics';
import { toFileName } from '@nrwl/workspace';

export interface Schema {
  project: string;
  production: boolean;
  apiToken?: string;
}

export default function(schema: Schema): Rule {
  const name = toFileName(schema.production ? 'environment.prod' : 'environment');
  const directory = `apps/${schema.project}/src/environments`;
  return (_, _context: SchematicContext) => {
    return mergeWith(apply(url('./files'), [
      applyTemplates({
        ...strings,
        name,
        production: schema.production,
        apiToken: `'${schema.apiToken || ''}'`,
      }),
      move(directory)
    ]));
  };
}

export const environment = {
  production: <%= production %>,
  apiToken: <%= apiToken %>
};

应用程序测试

在中国测试nx测试<项目名称>，使用nx e2e <项目名称>-e2e进行E2E测试。

$ npm run nx test web
$ npm run nx e2e web-e2e

使用test命令时，Nx会自动检测差异并执行所需的测试。如果想在CI环境中优化执行时间，这是一个推荐的选项。

$ npm run nx affected:test  # nx affected -- --target=testでも可
>  NX   NOTE  Affected criteria defaulted to --base=master --head=HEAD
>  NX  Running target test for projects:
  - api-interfaces
  - web
  - api
  - ui

应用程序的构建

要构建应用程序，请运行 `nx build <项目名称>` 命令。如果是生产版本的构建，请使用 `–prod` 选项。

$ npm run nx build api -- --prod
$ npm run nx build web -- --prod

最后

如果选择NestJS作为后端，可与Angular共享经验，能够高效开发。此外，通过使用Nx，可以轻松创建Angular + NestJS的环境。如果想要开发全栈Web应用程序使用Angular + NestJS，建议尝试Nx。