Explicación: Rutas y navegación

src/app/app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [];

Añadimos las rutas, pero claro... no hay componentes todavía, nos vamos a todas la páginas y renombramos con componentes

import { Routes } from '@angular/router';
import { InicioComponent } from './pages/inicio/inicio';
import { ProductosComponent } from './pages/productos/productos';
import { Pagina404Component } from './pages/pagina404/pagina404';

export const routes: Routes = [
  // 1) Al entrar en /, redirige a /inicio
  { path: '', redirectTo: 'inicio', pathMatch: 'full' },

  // 2) Rutas normales
  { path: 'inicio', component: InicioComponent },
  { path: 'productos', component: ProductosComponent },

  // 3) Ruta con parámetro
  { path: 'producto/:id', component: ProductoDetalleComponent },

  // 4) Ruta comodín (siempre al final)
  { path: '**', component: Pagina404Component }
];