Angular路由跳转至/signup时Signup组件不显示问题排查

问题背景 #

作为Angular新手，已配置路由，但跳转至/signup路径时，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 {}

可能的原因及解决方法 #

• 核心问题：缺失路由出口标签<router-outlet>
  Angular路由需要通过<router-outlet>标签作为容器，来渲染匹配到的组件内容。你的app.component.html中仅包含导航栏，没有添加这个关键标签，导致路由匹配到Signup组件后没有地方渲染。
  解决：修改app.component.html，在导航栏下方添加<router-outlet>：

  <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>
    <!-- 路由出口：用于渲染匹配的组件 -->
    <router-outlet></router-outlet>
  </div>
  

• 次要问题：Material按钮模块未导入
  Signup组件使用了mat-raised-button，但app.module.ts中未导入MatButtonModule，这会导致按钮无法正常渲染，虽然不会直接导致整个组件不显示，但如果控制台有Material相关报错，也可能影响组件加载。
  解决：在app.module.ts中添加MatButtonModule的导入：

  // 顶部导入模块
  import { MatButtonModule } from '@angular/material/button';
  
  // 在imports数组中添加
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatSlideToggleModule,
    MatToolbarModule,
    MatCardModule,
    MatInputModule,
    HttpClientModule,
    MatButtonModule // 添加这一行
  ]
  

• 已排除的问题
  你的路由配置中path: 'signup'与导航按钮的routerLink="/signup"路径完全匹配，Signup组件的导入路径和声明也正确，这部分无需调整。

内容的提问来源于stack exchange，提问作者Daniel