Espero puedan ayudarme con este problema. Verán, estoy aplicando lazy loading en un proyecto con angular y así mismo, en cada submódulo tengo rutas hijas correspondientes a cada pantalla. El problema que tengo es el siguiente:
Este componente de mi lista de órdenes lo envuelve ese sidenav y hasta ahí todo bien; ésto está en la ruta http://localhost:4200/#/mi-tienda/ordenes
Pero si voy a la ruta http://localhost:4200/#/ordenes éste se renderiza sin el nav ni el componente padre y, bueno, he tratado de prevenir ésto con redirect, pero creo que por el lazy loading no me está funcionando bien; entonces no se dónde aplicarlo para prevenir que la ruta http://localhost:4200/#/ordenes no sea accesible.
Ahora en código lo que tengo es esto:
Primero las sub rutas llamada ordenes.routes.ts
import { OrdenesComponent } from './main-ordenes/ordenes.component';
import { Routes, RouterModule } from '@angular/router';
const ordenesRoutes: Routes = [
{
path: 'ordenes',
component: OrdenesComponent,
}
]
export const ORDENES_ROUTES = RouterModule.forChild(ordenesRoutes);
Luego El sub módulo donde se cargan las rutas ordenes.module.ts
import { ClientesService } from './../clientes/clientes.service';
import { ProductosService } from './../productos/productos.service';
import { NgxPaginationModule } from 'ngx-pagination';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OrdenesService } from './ordenes.service';
import { ORDENES_ROUTES } from './ordenes.routes';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrdenesComponent } from './main-ordenes/ordenes.component';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { ModalFormComponent } from './modal-form/modal-form.component';
@NgModule({
declarations: [ OrdenesComponent, ModalFormComponent],
imports: [CommonModule, ORDENES_ROUTES, FormsModule, NgxPaginationModule, NgbModalModule, NgbDatepickerModule,
ReactiveFormsModule],
providers: [OrdenesService ,ProductosService, ClientesService],
exports: [ OrdenesComponent]
})
export class OrdenesModule { }
Éste es Llamado en otro submódulo llamado pages.module.ts
import { OrdenesModule } from './ordenes/ordenes.module';
import { PAGES_ROUTES } from './pages.routes';
import { AppRoutingModule } from './../app-routing.module';
import { SharedModule } from './../shared/shared.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PagesComponent } from './pages.component';
import { SidebarModule } from 'ng-sidebar';
import { ClientesModule } from './clientes/clientes.module';
import { ProductoModule } from './productos/producto.module';
@NgModule({
declarations: [ PagesComponent],
imports: [CommonModule, SharedModule, SidebarModule, AppRoutingModule, ClientesModule,
OrdenesModule, ProductoModule , PAGES_ROUTES],
exports: [ PagesComponent ]
})
export class PagesModule { }
que también tiene sus propias rutas llamado pages.routes.ts
import { NotFoundComponent } from './../not-found/not-found.component';
import { Routes, RouterModule } from '@angular/router';
import { PagesComponent } from './pages.component';
const pagesRoutes: Routes = [
{
path: 'mi-tienda',
component: PagesComponent,
children: [
{
path: '', redirectTo: '/mi-tienda/clientes', pathMatch: 'full'
},
{
path: '',
loadChildren: () => import('./clientes/clientes.module').then(m => m.ClientesModule)
},
{
path: '',
loadChildren: () => import('./ordenes/ordenes.module').then(m => m.OrdenesModule)
},
{
path: '',
loadChildren: () => import('./productos/producto.module').then(m => m.ProductoModule)
},
]
},
{
path: '', redirectTo: '/mi-tienda/clientes', pathMatch: 'full'
},
{
path: '**', component: NotFoundComponent
}
]
export const PAGES_ROUTES = RouterModule.forChild(pagesRoutes);
Y finalmente es llamado al app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule} from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
// custom
import { SharedModule } from './shared/shared.module';
import { NotFoundComponent } from './not-found/not-found.component';
import { PagesModule } from './pages/pages.module';
@NgModule({
declarations: [
AppComponent,
NotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
PagesModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Y éste es el archivo global de las rutas:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{
path: 'login',
component: LoginComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
Por si la estructura ha sido un poco confusa dejo esta imagen de la estructura de directorios:
También agrego el pages component, el cual envuelve a los demás componentes y contiene el sidenav y el encabezado junto con el router-outlet.
<ng-sidebar-container>
<!-- A sidebar -->
<ng-sidebar [(opened)]="opened" mode="push">
<div class="sidebar-content px-5">
<div class="profile d-flex justify-content-center align-items-center">
<div class="mt-5 mb-4">
<a class="btn-control" href="#/login">
<img src="assets/img/profile.png" alt="..." class="profile rounded-circle">
</a>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<!-- sidecontent -->
<ul class="list-group list-group-flush">
<li class="list-group-item mt-4" *ngFor="let link of links">
<a [routerLink]=link.url routerLinkActive="active">
<span class="material-icons mt-1">{{link.icon}}</span>
{{link.legend}}
</a>
</li>
</ul>
<!-- sidecontent -->
</div>
</div>
</ng-sidebar>
<!-- Page content -->
<div ng-sidebar-content>
<app-sidenav [isOpened]="opened" (sideControler)="opened=$event"></app-sidenav>
<app-breadcrum></app-breadcrum>
<div class="container-fluid">
<main class="card dashboar-main-container">
<!-- contenido -->
<router-outlet></router-outlet>
<!-- contenido -->
</main>
</div>
<app-footer></app-footer>
</div>
<ng-sidebar-container>
PagesComponent.html
deberia contener elsideBar
, debajo de el, dependiendo la logica, deberias tener un<router-outlet>
que renderizara tu componente. De esta manera elsideBar
siempre aparecera. Como lo tienes tu?path
en las rutas, son strings vacíos.#
es un símbolo reservado para referenciar a elementos HTML con unaid
dada