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 { }