I have an angular 17 project with everything setup correctly I think. I have set my routing as you can see and my pages are standalone. I can navigate manually by entering the path of the page I am trying to reach but I cannot do so through the html element with the routerLink

product.component

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

navbarcomponent

<li><a routerLink="/products">Nos Produits</a></li>

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [RouterLink, RouterModule],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.css'
})

route config

{ path: 'products', component: ProductsComponent }

appcomponent

<app-layout></app-layout>
<router-outlet></router-outlet>
<app-footer></app-footer>

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, LayoutComponent, FooterComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

providers

providers: [provideRouter(routes)]

I tried a lazyloading type of path but did not work