angular - 如何在 Nx monorepo 中为 NestJS 和 Angular 之间共享的 API 接口(interface)启用 Swagger？

Question

我想为 API 接口(interface)启用 Swagger，在 Nx monorepo 中的 NestJS 和 Angular 应用程序之间共享。是否有一致的而不是变通的方式？

这些是我没有成功的方法:

方法一、申请@nestjs/swagger共享 DTO 类的装饰器

使用 npx create-nx-workspace@latest 创建一个新的 Nx monorepo

选择 angular-nest工作区蓝图

安装 Swagger 依赖项并根据 guide 引导它

添加类型 Message 的输入在 app.component.ts (没有意义，仅用于测试):

export class AppComponent {
  @Input() message: Message;

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

装修message与 ApiProperty() 的属性(property)在 api-interfaces.ts :

import { ApiProperty } from '@nestjs/swagger';

export class Message {
  @ApiProperty()
  message: string;
}

运行 NestJS 应用程序。它工作正常，Swagger 在 Web View 中显示正确的 DTO 结构

但是，当我启动 Angular 应用程序时，出现错误:

WARNING in ./node_modules/@nestjs/common/utils/load-package.util.js 8:39-59
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/@nestjs/mapped-types/dist/type-helpers.utils.js
Module not found: Error: Can't resolve 'class-transformer' in '.\node_modules\@nestjs\mapped-types\dist'

ERROR in ./node_modules/@nestjs/common/cache/cache.providers.js
Module not found: Error: Can't resolve 'cache-manager' in '.\node_modules\@nestjs\common\cache'
ERROR in ./node_modules/@nestjs/common/pipes/validation.pipe.js
Module not found: Error: Can't resolve 'class-transformer' in '.\node_modules\@nestjs\common\pipes'
...

看起来像是捆绑问题，类似于 this one .我还没有找到任何优雅的工作解决方案来在 Angular 构建中修复它。

方法2.使用 NestJS Swagger plugin并避免装饰器

这将是比前一种更好的方法，但它并没有奏效。首先，Swagger 插件需要 NestJS CLI，这在 Nx monorepo 中并非如此。有一个 issue建议了一些解决方法，但我还没有发现它们足够可靠和完整。其次，该插件没有涵盖一些重要的用例，无论如何这些用例仍然需要装饰器。例如:

@ApiProperty({
  oneOf: [{ $ref: getSchemaPath(TypeA) }, { $ref: getSchemaPath(TypeB) }],
})
type: TypeA | TypeB;

如上所述，装饰器会导致错误。

方法 3. 从 DTO 类中创建接口(interface)，专门用于 Angular 应用程序

这种方法吸引我的是从后端特定逻辑(Swagger、序列化或验证装饰器)中抽象出来的能力。我们可以做到以下几点:

// Expose to the back-end
export class MessageDto {
  @ApiProperty()
  message: string;
}

// Expose to the front-end
export interface Message extends MessageDto {}

在这种情况下， Message界面与 Angular 应用程序一起编译得很好。但是一旦我们引入了更复杂的 DTO 组合(具有嵌套 DTO 的类)，这种方法就行不通了。

我将不胜感激任何其他想法。

Answer 1

我已经成功地在 Angular 和 Nest.js 之间共享了 DTO(方法 #1)
更换 @angular-devkit/build-angular:browser至 @angular-builders/custom-webpack:browser已解决构建或提供 angular 应用程序时的错误。
见 https://github.com/nestjs/nest/issues/1706#issuecomment-474657479更多细节。