3

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

introducir la descripción de la imagen aquí

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.

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

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>
3
  • PagesComponent.html deberia contener el sideBar, debajo de el, dependiendo la logica, deberias tener un <router-outlet> que renderizara tu componente. De esta manera el sideBar siempre aparecera. Como lo tienes tu?
    – Legna
    el 31 dic. 2020 a las 19:41
  • si amigo asi esta, no puse el pages.html porque suponia que el problema es con la configuracion de rutas y el redirect, pero ya lo agregue ahi puedes ver que el sidebar envuelve el router-outlet. el 31 dic. 2020 a las 19:56
  • Un aspecto importante que no está definido, son los path en las rutas, son strings vacíos. # es un símbolo reservado para referenciar a elementos HTML con una id dada
    – KBeDev
    el 12 ene. 2021 a las 21:32

1 respuesta 1

0

No veo nada extraño, pero yo lo uso diferente, prueba haciendo estos cambios

ordenes.routes.ts

const ordenesRoutes: Routes = [
  {
    path: '',
    component: OrdenesComponent,
  }
  ]

pages.routes.ts

const pagesRoutes: Routes = [
  {
        path: '', redirectTo: 'clientes', pathMatch: 'full'
      },
      {
        path: 'clientes',
        loadChildren: () => import('./clientes/clientes.module').then(m => m.ClientesModule)
      },
      {
        path: 'ordenes',
        loadChildren: () => import('./ordenes/ordenes.module').then(m => m.OrdenesModule)
      },
      {
        path: 'productos',
        loadChildren: () => import('./productos/producto.module').then(m => m.ProductoModule)
  },
]

Archivo global de rutas

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
{
        path: 'mi-tienda',
        component: PagesComponent,
        loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
      },
  {
    path: '**', component: NotFoundComponent
  }
];

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.