Angular项目的布线不正常工作

当我转到gif页面时，它没有显示gif，当我转到for ex:/upload时，它向我显示错误消息"无法匹配任何路由.URL段:"上传"

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GifComponent } from '../gif/gif.component';
import { GifDetailComponent } from '../gif/gif-detail.component'; // Import GifDetailComponent
import { UploadComponent } from '../Upload/upload.component'; // Import UploadComponent

const routes: Routes = [
  { path: 'gifs/:title', component: GifComponent },
  { path: 'gifs/category/:category', component: GifComponent },
  { path: 'upload', component: UploadComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<!-- app.component.html -->
<div class="container">
  <div class="categories">
    <h2>Categories</h2>
    <ul>
      <li *ngFor="let category of categories">{{ category }}</li>
    </ul>
  </div>
  <div class="gifs">
    <h1 class="title">Gifs</h1>
    <div *ngFor="let gif of gifs">
      <h2 class="title">
        <a [routerLink]="['/gifs', gif.title]" (click)="redirectToGif(gif)">{{ gif.title }}</a>
      </h2>
      <img class="gif" [src]="gif.src" alt="{{ gif.title }}" (click)="redirectToGif(gif)">
      <a [routerLink]="['/gifs', gif.title]">View Gif</a>
    </div>
  </div>
</div>
<router-outlet></router-outlet>

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { RootComponent } from './root.component'; // Import RootComponent
import { GifDetailComponent } from '../gif/gif-detail.component'; // Import GifDetailComponent
import { UploadComponent } from '../Upload/upload.component'; // Import UploadComponent
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    RootComponent, // Declare RootComponent
    GifDetailComponent,
    UploadComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    RouterModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [ RootComponent ] // Bootstrap RootComponent
})
export class AppModule { }

这是我的github:https://github.com/BekaEn/GifApp/blob/GifApp/

我认为某个地方可能只有一个错误，但我找不到它.花了很多个小时才找到它，但一无所获.我希望有人能找到答案