How to properly configure routes at angular 4 with Lazy loading

Question

my link to list the simplement client does not work , wanted to know why WHAT I WOULD HAVE TO DO TO CALL THE ROUTE /list customers and not customers/list customers

1 - Clienteroutingmodule 2 - Approutingmodule 3- routerlink

import { LoginGuard } from './login/login.guard';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [

  { path: '', component: HomeComponent },
  { path: 'clientes', loadChildren: 'app/clientes/cliente.module#ClienteModule' },
  
 // { path: '**', component: PageNotFoundComponent }
];

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

import { ClientesPedidosComponent } from './clientes-pedidos/clientes-pedidos.component';
import { LoginGuard } from './../login/login.guard';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ClientesListaComponent } from './clientes-lista/clientes-lista.component';
import { ClientesComponent } from './clientes.component';


const routes: Routes = [
  {
    //path: 'clientes' using lazyloading,
    path: '',
    component: ClientesComponent,
    children: [
      { path: 'listaclientes', component: ClientesListaComponent },
      { path: 'lista-pedidos', component: ClientesPedidosComponent },
      { path: ':id', component: ClientesComponent, canActivate: [LoginGuard] }
    ]
  },
];

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

<li><a routerLink="/listaclientes"><i class="fa fa-files-o"></i>Lista de Clientes</a></li>

Answer 1

With the current configuration you are making you must access /clientes/listaclientes.

Why?

A: You are registering the path /listaclientes inside the module ClienteRoutingModule which is dynamically charged next to the ClienteModule. So by default, your path /listaclientes is a path child of the path /clientes that carries the module.

How to just call /listaclientes?

A: You have to register the path in the main route module, the AppRoutingModule.

And no, there is no way you can register a path in a child module and access it without using your parent’s path before it.

If you use module hierarchy, you will need to use path hierarchy.

Answer 2

To make it work the way you want, with Lazy loading, you would have to create a module for each sub-route.

It turns out that to use Lazy loading, you have to declare a module with route in the app.module, when declaring this module, you must declare a path, this path will already generate a URL segment and all subroutes within this "Lazy Loaded" module will be under the initial module segment, in your case "customers".

If you want a gambiarra, you can create a path in the app.module by redirecting to a client module subroute:

const routes: Routes = [ 
    {path: 'listaclientes', redirectTo: 'clientes/listaclientes'}, 
];