Actualmente estoy usando la versión 13 de Angular.
Como se indica en la documentación oficial, el enrutamiento debe realizarse creando un componente y enrutándolo de esta manera en app-routing.module.ts
const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, ];pero hacerlo renderizará mi archivo app.comoponent.html sin cambiar nada. Puedo ver que la URL cambió, pero eso es todo. Otras fuentes más nuevas consideran hacer algo como
{ path:'mainpage', loadChildren: () => import('./mainpage/mainpage.module').then(m => m.MainpageModule) } y, como la solución anterior, no me funciona. También agregué la directiva <router-outlet></router-outlet> (que en realidad ya se agregó) pero nada cambió. ¿Qué está pasando actualmente? ¡Gracias!
El RouterOutlet actúa como un marcador de posición que Angular llena dinámicamente en función del estado actual del enrutador, por lo que en la mayoría de los casos probablemente tendrá la directiva <router-outlet></router-outlet> en su app.component.html. Este elemento en realidad le informa a Angular que actualice la vista de la aplicación con el componente para la ruta seleccionada.
Cada ruta en la matriz de rutas es un objeto de JavaScript que contiene dos propiedades. La primera propiedad es la ruta que define la ruta URL para la ruta. El segundo es el componente que define el componente que Angular debe usar para la ruta correspondiente.
loadChildren es un problema diferente. De forma predeterminada, los NgModules angulares se cargan con entusiasmo, lo que significa que tan pronto como se carga la aplicación, también lo hacen todos los NgModules , incluso si no son necesarios de inmediato. Si desea utilizar la carga diferida para módulos Angular, puede utilizar loadChildren (en lugar del componente como en su primer ejemplo) en sus rutas de AppRoutingModule .