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

Question

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

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

方法 1. 将@nestjs/swagger装饰器应用于共享 DTO 类

• 创建一个新的 Nx monorepo npx create-nx-workspace@latest
• 选择angular-nest工作区蓝图
• 安装 Swagger 依赖项并根据指南引导它
• 添加类型的输入Message中app.component.ts（没有意义，只是为了测试）：

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

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

• message用ApiProperty()in装饰属性api-interfaces.ts：

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

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

• 运行 NestJS 应用程序。它工作正常，Swagger 在 Web 视图中显示正确的 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'
...

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

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

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

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'
...

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

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

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

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

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

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

Answer 1

我已经成功地在 Angular 和 Nest.js 之间共享 DTO（方法#1）

替换@angular-devkit/build-angular:browser为@angular-builders/custom-webpack:browser解决了构建或提供角度应用程序时的错误。

有关更多详细信息，请参阅https://github.com/nestjs/nest/issues/1706#issuecomment-474657479。