Angular routing displaying the same app.component.html

I’m currently using Angular version 13.

As stated by the official documentation, routing should be done by creating a component and routing it like this in the app-routing.module.ts

const routes: Routes = [
{ path: 'first-component', component: 
FirstComponent },
{ path: 'second-component', component: 
SecondComponent },
];

but doing so will render my app.comoponent.html file without actually changing anything. I can see that the url changed, but that’s about it.
Other newer sources consider doing something like

{
path:'mainpage',
loadChildren: () => import('./mainpage/mainpage.module').then(m 
=> m.MainpageModule)
}

and, as the solution above, does not work for me. I’ve also added the <router-outlet></router-outlet> directive, (which was actually already added) but nothing changed. What is currently happening? Thanks!