错误错误：NG04002：无法匹配任何路由。 URL 段：'agregar-producto'

Question

使用角度 在此输入图片描述

这是我正在使用的文件

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } 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, ProductoListaComponent\]
})
export class AppComponent {
title = 'inventario-app';
}

这是App.compoment，html

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #8c0aef;">
      <div class="container-fluid">
        <a class="navbar-brand" href="/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 active" aria-current="page" href="/productos">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/agregar-producto">Agregar Producto</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
</div>

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

app.routes我不知道错误是否在这部分，因为我的productos和agregar Producto路径完全相同

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

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

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

应用程序配置.服务器

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { provideHttpClient } from '@angular/common/http';

const serverConfig: ApplicationConfig = {
providers: \[
provideServerRendering(),
provideHttpClient()
\]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

应用程序配置

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
 
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import {provideHttpClient} from '@angular/common/http';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideClientHydration(),
    provideHttpClient()
  ]
};

现在我正在尝试获取下一个视图，但我不知道为什么它找不到 agregar Producto

在此输入图片描述

Answer 1

当使用角度路由时，我们不应该使用

href

，我们必须使用

routerLink

，后者的优点是，屏幕不会完全刷新并作为单页应用程序工作，

href

将导致屏幕重新加载，这是非常没有角度的！

另请注意，要使

routerLink

正常工作，您必须将导入

RouterLink

或

RouterModule

添加到应用程序组件的导入数组中，如下所示！

app.component.html

<a class="navbar-brand" routerLink="/productos">Sistema de Inventarios</a>
<a class="nav-link active" aria-current="page" routerLink="/productos">Inicio</a>
<a class="navbar-brand" routerLink="/productos">Sistema de Inventarios</a>

app.component.ts

import { RouterModule } from '@angular/router';
...

...
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule]
  ...
})
...