Angular路由报错NG04002：无法匹配路由URL段问题求助

核心问题分析 #

出现Error: NG04002: Cannot match any routes的原因集中在以下几点：

• 独立组件（standalone）被错误注册到NgModule的declarations数组，引发组件注册冲突
• app.component.html直接渲染<app-home>，覆盖路由出口的内容展示
• 头部组件未导入路由模块，导致routerLink无法触发路由跳转

具体修复步骤 #

1. 修正AppModule的组件声明 #

移除declarations中所有独立组件（AppComponent、HomeComponent、CarrinhoComponent），独立组件无需在NgModule中声明：

// src/app/app-module.ts
@NgModule({
  declarations: [
    HeaderComponent,
    ProductsHeaderComponent,
    FiltersComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatGridListModule,
    MatMenuModule,
    MatButtonModule,
    MatCardModule,
    MatIconModule,
    MatExpansionModule,
    MatTreeModule,
    MatListModule,
    MatToolbarModule,
    MatTableModule,
    MatBadgeModule,
    MatSnackBarModule,
    HttpClientModule
  ],
  exports: []
})
export class AppModule { }

2. 清理AppComponent模板 #

删除app.component.html中的<app-home>标签，仅保留路由出口，由路由控制页面内容：

<!-- src/app/app-component.html -->
<app-header></app-header>
<router-outlet></router-outlet>

3. 修复HeaderComponent的路由支持 #

将HeaderComponent改为独立组件，并导入RouterModule以支持routerLink：

// src/app/components/header/header.component.ts
import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatMenuModule,
    MatButtonModule,
    RouterModule
  ],
  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
})
export class HeaderComponent { }

4. 确保CarrinhoComponent为独立组件 #

修改CarrinhoComponent为独立组件（若尚未设置）：

// src/app/pages/carrinho/carrinho.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-carrinho',
  standalone: true,
  imports: [],
  templateUrl: './carrinho.component.html',
  styleUrl: './carrinho.component.css'
})
export class CarrinhoComponent { }

5. 修正路由跳转路径（可选） #

将routerLink改为绝对路径（添加斜杠），避免相对路径导航问题：

<!-- src/app/components/header/header.component.html -->
<a routerLink="/home">Conheça a Loja</a>
<!-- ... -->
<a routerLink="/carrinho">Consultar Carrinho</a>
<!-- ... -->
<button routerLink="/carrinho" class="bg-text-white-rounded-full w-10 h-10">
  <mat-icon>remove_shopping_cart</mat-icon>
</button>

验证修复 #

完成修改后重启Angular应用：

ng serve

此时访问localhost:4200/home和localhost:4200/carrinho应正常显示对应组件内容，头部跳转链接也能正确导航。

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