Angular路由错误NG04002：无法匹配'agregar-producto'路径

问题根源分析 #

从你的代码来看，有两个核心问题导致路由匹配失败：

1. 导航链接使用原生href而非Angular路由指令 #

你在导航栏中使用了原生HTML的href属性跳转路由，这会触发页面硬刷新，绕过Angular的路由系统，导致路由规则无法被正确识别和处理。

2. 路由配置混合两种模式（独立组件+NgModule） #

你的app.routes文件同时定义了@NgModule风格的路由配置（RouterModule.forRoot）和独立组件模式的routes数组，而app.config中已经通过provideRouter(routes)配置了路由，两者冲突导致路由规则未正确加载。

分步解决方案 #

步骤1：替换导航链接为Angular路由指令 #

修改app.component.html中的所有跳转链接，将href替换为routerLink，并添加routerLinkActive标记当前激活路由：

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #8c0aef;">
      <div class="container-fluid">
        <a class="navbar-brand" routerLink="/productos">Sistema de Inventarios</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" routerLink="/productos" routerLinkActive="active" ariaCurrentWhenActive="page">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/agregar-producto" routerLinkActive="active">Agregar Producto</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
</div>

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

步骤2：在AppComponent中导入路由指令 #

修改app.component.ts，添加RouterLink和RouterLinkActive到imports数组，这些是独立组件使用路由指令必需的依赖：

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { ProductoListaComponent } from "./producto-lista/producto-lista.component";

@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.css',
imports: [RouterOutlet, RouterLink, RouterLinkActive, ProductoListaComponent]
})
export class AppComponent {
title = 'inventario-app';
}

步骤3：清理路由配置文件（移除NgModule冲突） #

修改app.routes.ts，删除@NgModule相关代码，只保留路由数组导出——因为你使用独立组件模式，路由已通过app.config中的provideRouter加载：

import { Routes } from '@angular/router';
import { AgregarProductoComponent } from './agregar-producto/agregar-producto.component';
import { ProductoListaComponent } from './producto-lista/producto-lista.component';

export const routes: Routes = [
    { path: 'productos', component: ProductoListaComponent },
    { path: '', redirectTo: 'productos', pathMatch: 'full' },
    { path: 'agregar-producto', component: AgregarProductoComponent}
];

步骤4：验证AgregarProductoComponent的独立性 #

确保AgregarProductoComponent是独立组件（standalone: true），独立模式下推荐使用该配置：

// agregar-producto.component.ts示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-agregar-producto',
  standalone: true,
  templateUrl: './agregar-producto.component.html',
  styleUrl: './agregar-producto.component.css'
})
export class AgregarProductoComponent {
  // 组件逻辑
}

验证修复 #

完成以上修改后，重启开发服务器，点击导航栏的"Agregar Producto"链接，路由应该能正确匹配并加载对应组件，NG04002错误会消失。

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