1

Hola tengo un proyecto ya creado en Angular, pero quisiera implementar el Lazy Loading. La estructura de mi proyecto seria basicamente src/app/components. Dentro de la carpeta components se encuentra el modulo de componentes y a la vez los diferentes componentes.

El problema es que solo tengo un modulo para los componentes, en este caso tendria que crear un modulo para cada componente para colocar el lazy loading? Si solo tengo el modulo de componentes como puedo especificar que para la ruta de Formulario utilize el componente FormComponent que esta dentro del Modulo de Componentes? Como podria implementarlo?

Este es mi modulo de componentes

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormComponent } from './form/form.component';
import { MapComponent } from './form/map/map.component';
import { SidebarComponent } from './form/sidebar/sidebar.component';
import { ModalComponent } from './pqrs-activas/modal/modal.component';
import { NgxPaginationModule } from 'ngx-pagination';
import { MaterialModule } from '../material/material.module';
import { AppRoutingModule } from '../app-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { TableComponent } from './pqr-listas/table/table.component';
import { DelUsuarioComponent } from './control-usuarios/del-usuario/del-usuario.component';
import { ControlUsuariosComponent } from './control-usuarios/control-usuarios.component';
import { AddUsuarioComponent } from './control-usuarios/add-usuario/add-usuario.component';
import { UpdateUsuarioComponent } from './control-usuarios/update-usuario/update-usuario.component';

@NgModule({
    declarations: [
        FormComponent,
        PqrsActivasComponent,
        MapComponent,
        SidebarComponent,
        ModalComponent,
        RevisarComponent,
        TableComponent,
        DelUsuarioComponent,
        ControlUsuariosComponent,
        AddUsuarioComponent,
        UpdateUsuarioComponent
    ],
    exports: [
        FormComponent,
        PqrsActivasComponent,
        MapComponent,
        SidebarComponent,
        ModalComponent,
        RevisarComponent,
        TableComponent,
        DelUsuarioComponent,
        ControlUsuariosComponent,
        AddUsuarioComponent,
        UpdateUsuarioComponent
    ],
    imports: [
        CommonModule,
        NgxPaginationModule,
        MaterialModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule,
    ],
})
export class ComponentsModule { }

Y este es mi app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormComponent } from './components/form/form.component';
import { PqrsActivasComponent } from './components/pqrs-activas/pqrs-activas.component';
import { PqrsRevisionComponent } from './components/pqrs-revision/pqrs-revision.component';
import { PdfComponent } from './components/pqrs-activas/pdf/pdf.component';
import { LoginComponent } from './auth/login/login.component';
import { PqrListasComponent } from './components/pqr-listas/pqr-listas.component';
import { AutenticacionGuard } from './auth/autenticacion.guard';
import { ControlUsuariosComponent } from './components/control-usuarios/control-usuarios.component';
import { ResetPasswordComponent } from './auth/reset-password/reset-password.component';
import { ForgotPasswordComponent } from './auth/forgot-password/forgot-password.component';
import { NotFoundComponent } from './shared/not-found/not-found.component';
const routes: Routes = [
    {
        path: '',
        component: FormComponent,
        canActivate: [AutenticacionGuard],
        pathMatch: 'full',
    },
    {
        path: 'control-usuarios',
        component: ControlUsuariosComponent,
        canActivate: [AutenticacionGuard],
    },
    {
        path: 'formulario',
        component: FormComponent,
        canActivate: [AutenticacionGuard],
    },
    {
        path: 'login',
        component: LoginComponent,
    },
    {
        path: '**',
        component: NotFoundComponent,
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
    exports: [RouterModule],
})
export class AppRoutingModule { }
1
  • esto no creo que de para resolverse en una sola pregunta, ya que implica cambios en tu código y archivos, tienes que generar distintos módulos según como quieras separar tus rutas, te dejo el ejemplo de la documentación, espero sea de ayuda. Lazy-loading feature modules el 1 dic. 2020 a las 5:52

1 respuesta 1

1

Problema

El problema es que solo tengo un modulo para los componentes, en este caso tendria que crear un modulo para cada componente para colocar el lazy loading?

Si, para poder hacer uso del lazy loading debes crear un módulo aparte que contenga el o los componentes deseados.

Si solo tengo el modulo de componentes como puedo especificar que para la ruta de Formulario utilice el componente FormComponent que esta dentro del Modulo de Componentes?

Si solo tienes un módulo entonces no puedes hacer uso de lazy load ya que esta característica es a nivel módulos.

Solución

Para ello debes crear un módulo que declare al componente FormComponent e indicar en app-routing.module.ts, en la ruta formulario que vas a cargar un módulo de forma "perezosa".

Como podria implementarlo?

Esto sería:

/formulario.module.ts

import { NgModule } from '@angular/core';
import { FormComponent } from './form/form.component';
import { FormularioRoutingModule } from './formulario-routing.module.ts';

@NgModule({
  imports: [FormularioRoutingModule],
  declarations: [FormComponent]
})
export class FormularioModule { }

/formulario-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormComponent } from './form/form.component';

const routes: Routes = [
  {
    path: '',
    component: FormComponent 
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FormularioRoutingModule { }

En /app-routing.module.ts:

  {
    path: 'formulario',
    loadChildren: () => import('./form/formulario.module').then(m => m.FormularioModule ),
    canActivate:[AutenticacionGuard],
  },

Y por último en tu modulo ComponentsModule debes eliminar cualquier import que haga referencia a FormComponent y FormularioModule.

Para crear el nuevo módulo de manera sencilla puedes hacer uso de la cli de angular:

ng generate module formulario --route formulario

NOTA IMPORTANTE

Debes tener cuidado de qué versión de Angular estés usando, ya que a partir de la versión 8 en adelante se deprecó el uso de esta notación loadChildren: './path/to/module#Module' por el uso de import().

De todas formas la CLI maneja esto de manera automática.

Tu Respuesta

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

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