时间戳

首页 > 解决方案 > 使用带有 NestJS 和 Fastify 的静态内容（Angular 8）时的路由问题

angular - 使用带有 NestJS 和 Fastify 的静态内容（Angular 8）时的路由问题

问题描述

过去几天我一直在寻找一种方法来解决在 NestJS 和 Fastify 中使用静态内容时的路由问题。具体来说，我正在尝试将 NestJS 托管的 Angular 8 与 Fastify 结合使用。我一直在遵循教程中给出的示例：https ://www.djamware.com/post/5d2898430707cc5968d9d57f/build-a-web-app-using-nestjs-fastify-mongodb-and-angular-8

问题是如果你尝试直接导航到一个特定的 URL，例如http://localhost:3000/articles，Fastify 服务器会响应一个包含 404 错误消息的 JSON 字符串。通过克隆教程的 GitHub 存储库，我已经将问题缩小到 Fastify 的一些特别问题上，并且只需要用 Express 替换 Fastify 就可以了，这确实有效。

我正在发布我的代码，希望有人能告诉我我做错了什么。我想使用 Fastify 而不是 Express，因为如果速度声明是准确的，我真的可以使用提高的性能。我留下了用于切换 Express 项目的注释掉的代码。感谢任何花时间仔细检查甚至尝试提供帮助的人。

编辑：我刚刚意识到我忘了提供 GitHub 存储库的链接，这里是：https ://github.com/didinj/nestjs-fastify-mongodb-angular8.git

主要的.ts

import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { AppModule } from './app.module';
import { join } from 'path';


async function bootstrap() {
  // const app = await NestFactory.create(AppModule);

  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter({
      wildcard: false,
      logger: {
        level: 'trace',
        file: '/Users/jcorekin/fastify.log' // Will use pino.destination()
      }
    }),
  );
  app.useStaticAssets({
    root: join(__dirname, '../client/dist/
  });

  await app.listen(3000, '0.0.0.0');
}
bootstrap();

app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ArticleModule } from './article/article.module';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: 
  [
    // ArticleModule,
    // ServeStaticModule.forRoot({
    //   rootPath: join(__dirname, '../client/dist/client'),
    // }),
  ],
  // controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

应用服务.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

标签： angulartypescriptroutingnestjsfastify

解决方案

我找到了一个解决方案，但令人讨厌的是，它需要用 Express 替换 Fastify。Fastify 似乎在路由方面存在一些问题。

main.ts

import { NestExpressApplication } from '@nestjs/platform-express';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.setGlobalPrefix('api');
  await app.listen(3000);
}
bootstrap();

app.module.ts

import { CommentModule } from './comment/comment.module';
import { Module, HttpModule } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ProfessorModule } from './professor/professor.module';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '..', 'client/dist/client'),
    }),
    HttpModule,
    ...
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

我真的很想保留 Fastify，但是我今天花了一整天的时间试图弄清楚为什么路由被破坏了，当我可以简单地更改为 express 并且它运行良好时！

我还要承认，我没有用 fastify 尝试这个确切的解决方案，所以它可能适用于 fastify，如果你只保留旧的 fastify 应用程序创建代码，摆脱那个奇怪的“useStaticAssets”调用，只使用 serve-static在 app.module.ts 上

推荐阅读