Usign angular
enter image description here

this are the files i am using

the 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';
}

this is the 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 i don’t know if the error is in this part because i am did both the productos and agregar producto path exactly the same

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 {}

app.config.server

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);

app.config

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()
  ]
};

for now i am trying to get the next view but i dont know why it cant find agregar producto

enter image description here