How to correctly configure angular paths 4 with lazy loading

Question

How to correctly configure angular paths 4 with lazy loading

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

My link to list the client does not work, I wanted to know the WHY WHAT WOULD I HAVE TO DO TO CALL THE ROUTE / list clients and not customers / clients list

1 - ClientRoutingModule 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>

angular

asked by anonymous 30.08.2017 / 04:56

2 answers

Catch the text between a tag Clear my user's cache?

score 0 · Answer 1

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 sub routes within of this "lazy loaded" module will be under the initial module segment, in your case "clients".

If you want a gambiarra, you can create a path in the app.module redirecting to a sub route of the clients module:

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

score 0 · Answer 2

With the current configuration you are doing you should access /clientes/listaclientes .

Why this?

A: You are registering the path /listaclientes within the ClienteRoutingModule module that is loaded dynamically along ClienteModule . So by default, your /listaclientes path is a child path of the /clientes path that loads the module.

How to call only /listaclientes ?

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

And no, you can not 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 have to use path hierarchy.