Website-Suche

TypeScript - Routing-Problem bei der Verwendung von statischen Inhalten (Angular 8) mit NestJS und Fastify


Ich habe in den letzten Tagen nach einer Möglichkeit gesucht, ein Routing-Problem beim Verwenden statischer Inhalte mit NestJS und Fastify zu beheben. Genauer gesagt versuche ich, Angular 8 zu verwenden, das von NestJS mit Fastify im Hintergrund gehostet wird. Ich habe dem Beispiel im Tutorial gefolgt: https://www.djamware.com/post/5d2898430707cc5968d9d57f/build-a-web-app-using-nestjs-fastify-mongodb-and-angular-8

Das Problem ist, dass wenn man versucht, direkt zu einer bestimmten URL zu navigieren, wie z. B. http://localhost:3000/articles, der Fastify-Server mit einer JSON-Zeichenfolge antwortet, die eine 404-Fehlermeldung enthält. Ich habe das Problem auf etwas spezifisch Problematisches mit Fastify eingegrenzt, indem ich das GitHub-Repo des Tutorials geklont habe und nichts weiter daran geändert habe, als Fastify durch Express zu ersetzen, was funktioniert.

Ich poste meinen Code in der Hoffnung, dass mir jemand sagen kann, was ich falsch mache. Ich möchte Fastify anstelle von Express verwenden, weil ich, wenn die Geschwindigkeitsangaben zutreffen, die erhöhte Leistung wirklich gut gebrauchen könnte. Ich habe den auskommentierten Code stehen lassen, den ich verwendet habe, um das Projekt von Express zu wechseln. Danke an alle, die sich die Zeit nehmen, sich das anzusehen und sogar versuchen zu helfen.

BEARBEITEN: Mir ist gerade aufgefallen, dass ich vergessen habe, einen Link zum GitHub-Repository bereitzustellen, hier ist er: https://github.com/didinj/nestjs-fastify-mongodb-angular8.git

main.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.modul.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 { }

app.service.ts

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

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

Antwort #1

Ich habe eine Lösung gefunden, aber ärgerlicherweise erfordert sie, Fastify durch Express zu ersetzen. Es scheint, dass Fastify einige Probleme mit dem Routing hat.

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.modul.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 { }

Ich wollte Fastify wirklich behalten, aber ich habe den ganzen Tag damit verbracht herauszufinden, warum das Routing kaputt war, obwohl ich einfach zu Express wechseln könnte und es perfekt funktioniert!

Ich werde auch zugeben, dass ich diese genaue Lösung nicht mit Fastify ausprobiert habe, also könnte sie mit Fastify funktionieren, wenn man einfach den alten Fastify-App-Erstellungscode beibehält, diesen seltsamen "useStaticAssets"-Aufruf weglässt und einfach serve-static in app.module.ts verwendet.