Router/lazy automático

 

yo puedo crear un modulo pero que tenga una ruta asociada.  a través de : 

ng g m productos --routing

creandose :

CREATE src/app/productos/productos-routing.module.ts (252 bytes)

CREATE src/app/productos/productos.module.ts (292 bytes)

donde productos-roting está incluido ya en productos.module.

CRearemos ahora un par de componentes

ng g c productos/pages/agregar

ng g c productos/pages/listardo

ng g c productos/pages/editar

ng g c productos/pages/producto

se crearán los componentos dentro de pages adentro del module productos

estblezco las rutas hijas para este modulo

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { AgregarComponent } from './pages/agregar/agregar.component';

import { EditarComponent } from './pages/editar/editar.component';

import { ListadoComponent } from './pages/listado/listado.component';

import { ProductoComponent } from './pages/producto/producto.component';

const routes: Routes = [

  {

    path:"",

    children:[

      { path: "agregar", component:AgregarComponent},

      { path: "editar", component:EditarComponent},

      { path: "listado", component:ListadoComponent},

      { path: "producto", component:ProductoComponent},

      {path:"**", redirectTo:"listado"}

    ]

  }

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]

})

export class ProductosRoutingModule { }

ahora creo la ruta madre

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [

  {

    path:"auth",

    // cuando sea llamado se ejecutará la carga

    // le estoy diciendo importame este medulo si es requerido

    //esta es una gfunción que retorna una promesa

    loadChildren: () => import('./auth/auth.module').then(m=>m.AuthModule)

  //la promesa trae el modulo que llamamos m y estratemos si valor

  // con m.authModule

  },

  {

    path:"productos",

    loadChildren: () => import('./productos/productos.module').then(m=>m.ProductosModule)

  },

  {// sino coloca nada se va a redirigir por defecto a auth

    path:"**", redirectTo:"auth"

  }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }