Html 注册组件不显示当我导航到注册站点

我是新来的.因此，我有路由到位，当我的网站导航到/signup，它应该得到注册组件.这里有什么问题？

Signup.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrl: './signup.component.scss',
})
export class SignupComponent {}

signup.component.html

<div class="signup-container">
  <mat-card class="signup-card">
    <mat-card-content>
      <h2 class="signup-caption">Sign Up</h2>
      <form>
        <div class="form-input">
          <mat-form-field>
            <mat-label>Email</mat-label>
            <input
              matInput
              placeholder="Enter your email"
              name="email"
              type="email"
              required
            />
          </mat-form-field>
        </div>

        <div class="form-input">
          <mat-form-field>
            <mat-label>Name</mat-label>
            <input
              matInput
              placeholder="Enter your Name"
              name="name"
              type="name"
              required
            />
          </mat-form-field>
        </div>

        <div class="form-input">
          <mat-form-field>
            <mat-label>Password</mat-label>
            <input
              matInput
              placeholder="Enter your Password"
              name="password"
              type="password"
              required
            />
          </mat-form-field>
        </div>

        <div class="form-input">
          <mat-form-field>
            <mat-label>Confirm password</mat-label>
            <input
              matInput
              placeholder="Confirm your password"
              name="confirmPassword"
              type="password"
              required
            />
          </mat-form-field>
        </div>
        <button mat-raised-button color="bg-dark" class="signup-button">
          Sign Up
        </button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignupComponent } from './components/signup/signup.component';
import { LoginComponent } from './components/login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
];

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

app.component.html

<div>
  <mat-toolbar color="bg-light" class="navbar">
    <span class="navbar-brand">Stack Exchange</span>
    <span class="spacer"></span>
    <button routerLink="/login" routerLinkActive="active">Login</button>
    <button routerLink="/signup" routerLinkActive="active">sign up</button>
  </mat-toolbar>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import {
  BrowserModule,
  provideClientHydration,
} from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { LoginComponent } from './components/login/login.component';
import { SignupComponent } from './components/signup/signup.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent, LoginComponent, SignupComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatSlideToggleModule,
    MatToolbarModule,
    MatCardModule,
    MatInputModule,
    HttpClientModule,
  ],
  providers: [provideClientHydration(), provideAnimationsAsync()],
  bootstrap: [AppComponent],
})
export class AppModule {}

我想这可能是一些进口问题，所以你可能会发现一些进口是不必要的.它可能是关于路由或一些标签，我没有.