Angular 10 Lazy loading doesn't redirect to component

Question

I have in my app routing module routes like this:

const routes: Routes = [
  ...
  {path: 'listar', loadChildren: () => import('./views/drinks/drinks.module').then((m => m.DrinksModule))},
  ...
];

then, I have a drinks routing module this routes:

 const routes: Routes = [
  {path: '', component: DrinksListagemComponent },
  {path: 'drinks/:categoria/:drinks', component: DrinksListagemComponent },
  {path: 'drinks/detalhes/:id', component: DrinksDetalhesComponent },
    ];

At my component I have a link to do the redirect:

HTML

<a (click)="toNavigateTo(drink.idDrink)">Clique para ver detalhes.</a>

TS

toNavigateTo = (id: number) => this.router.navigateByUrl('/listar/drinks/detalhes/' + id);

when clicked, the url changes and no error appears at the console, but my DrinkDetalhesComponent is not displayed

based on your ourte config for the drinks module, is the "DrinksListagemComponent loaded instead? — Edward
– Edward, Commented Jan 8, 2021 at 19:35

Philipp Meissner · Accepted Answer · 2021-01-08 20:01:42Z

Based on your response, the issue appears to be in your routing config for DrinksModule.

You have two routes in DrinksModule that effectively are the same. At least as far as angular is concerned.

{path: 'drinks/:categoria/:drinks', component: DrinksListagemComponent },
{path: 'drinks/detalhes/:id', component: DrinksDetalhesComponent },

As far as the routing module is concerned, because you have drinks/:categoria/:drinks before drinks/detalhes/:id, it defaults to this as it is first in the array. Routing is based on a "first match" approach.

according to the angular docs

The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route. The wildcard route comes last because it matches every URL and the Router selects it only if no other routes match first.

Angular has no way of knowing that detalhes is not a valid categoria. therefore it is treating it as such.

A simple fix to this is to change the prefix of your routes to be more specific. i.e.

{path: 'drinks/:categoria/:drinks', component: DrinksListagemComponent },
{path: 'drink/detalhes/:id', component: DrinksDetalhesComponent },

by removing the "s" for details (since we are only looking at one item), now we have two paths that the routing module will treat as separate. The routing module won't mix drinks and drink. You would need to modify your toNavigateTo method to send the user to:

this.router.navigateByUrl('/listar/drink/detalhes/' + id);

This of course is just an example - You can change the prefix to whatever value makes sense for your need.

Collectives™ on Stack Overflow

Angular 10 Lazy loading doesn't redirect to component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related