Angular使用mat-sidenav导航时出现InvalidCharacterError错误求助

在Angular 13项目的mat-sidenav中使用<a>标签结合routerLink实现组件导航时，触发以下运行时错误：

Uncaught (in promise): InvalidCharacterError: String contains an invalid character

错误定位到app.component.html第22行，项目无编译错误，仅在点击导航链接时弹出异常。

相关代码文件 #

app.component.html #

<mat-toolbar color="primary" class="mat-elevation-z4">
  <span>
    <button mat-mini-fab (click)="sidenav?.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <span class="logo">
      <img src="assets/logo.png" alt="Logo" />
    </span>
    <span class="title">
      {{ title }}
    </span>
  </span>
  <span class="spacer"></span>
  <button class="login" mat-mini-fab>
    <mat-icon>person</mat-icon>
  </button>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" opened class="app-sidenav">
    <nav>
      <a
        mat-button
        class="nav-link"
        *ngFor="let link of links"
        [routerLink]="link.path"
        routerLinkActive="active"
      >
        <mat-icon>{{ link.icon }}</mat-icon>
        {{ link.title }}
      </a>
    </nav>
  </mat-sidenav>

  <div class="container">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

app.component.ts #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title: string = 'Angular 13 Fundamentals';

  links: Array<{ path: string; icon: string; title: string }> = [
    { path: '/home', icon: 'home', title: 'Home' },
    { path: '/courses', icon: 'view_list', title: 'Courses' },
  ];

  constructor() {}
}

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CoursesComponent } from './courses/courses.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'courses', component: CoursesComponent },
  { path: '**', redirectTo: '/home' }
];

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

app.module.ts #

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { HomeComponent } from './home/home.component';
import { CoursesComponent } from './courses/courses.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    HttpClientModule,
    FormsModule,
  ],
  declarations: [AppComponent, HomeComponent, CoursesComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

解决方案 #

错误核心原因是原生<a>标签与mat-button指令的行为冲突：Angular Material的mat-button指令会修改<a>标签的DOM结构和默认行为，干扰routerLink的路径解析逻辑。

修复方案1：改用<button>标签结合routerLink #

将导航元素替换为<button>，routerLink可直接在按钮上使用：

<button
  mat-button
  class="nav-link"
  *ngFor="let link of links"
  [routerLink]="link.path"
  routerLinkActive="active"
>
  <mat-icon>{{ link.icon }}</mat-icon>
  {{ link.title }}
</button>

修复方案2：使用Material专为链接设计的组件 #

保留<a>标签，但改用mat-flat-button/mat-stroked-button等Material链接组件，避免指令冲突：

<a
  mat-flat-button
  class="nav-link"
  *ngFor="let link of links"
  [routerLink]="link.path"
  routerLinkActive="active"
>
  <mat-icon>{{ link.icon }}</mat-icon>
  {{ link.title }}
</a>

额外优化：统一路由路径格式 #

路由配置中path为相对路径（如home），而links数组中使用了绝对路径（如/home）。虽然Angular路由兼容两种写法，但统一为相对路径更规范：

links: Array<{ path: string; icon: string; title: string }> = [
  { path: 'home', icon: 'home', title: 'Home' },
  { path: 'courses', icon: 'view_list', title: 'Courses' },
];

内容的提问来源于stack exchange，提问作者it-works-on-my-computer