Angular2 routing with lazy modules

Question

I try to figure out how to configure routing in my application with lazy loaded modules.

For instance I have a lazy module called AnimalsModule, and I want that this module handle 2 routes "/cats" and "/dogs".

In current router api I need to specify common path for all lazy module routes, like: 'animals/dogs' and 'animals/cats'.

{
   path: "animals",
   loadChildren: "animals"
}

I can specify empty path for AnimalsModule:

{
    path: "",
    loadChildren: "animals"
},
{
   path: "foo",
   component: FooComponent
}

But in this case AnimalsModule will be unnecessary loaded when user navigates to "/foo" resource.

If I create 'animals/cats' and 'animals/dogs' routes and in the future I want to refactor my code to split AnimalsModule into DogsModule and CatsModule (also lazy), I will have to break my application routes. (same for merge)

How to create routing with lazy module without common path?

But why dont you just write foo route out of the animalmodule? If you do so, I dont think then it has anything to do with animalmodule. And at the end you want to split it so better to define it ouside of the animalmodule. — micronyks
– micronyks, Commented Jan 17, 2017 at 4:35
"foo" does not have anithing to do with AnimalsModule, but in this example AnimalsModule will be loaded when accessing "foo" route — Skyliver
– Skyliver, Commented Jan 17, 2017 at 7:36

Meligy · Accepted Answer · 2017-01-17 04:50:00Z

1

Routes have a property called matcher property see docs, where you can provide your own route matching logic, but as in the comment of the question, I'd really either create 2 routes or even separate them into 2 modules (more likely).

answered Jan 17, 2017 at 4:50

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Skyliver Over a year ago

It seems that docs for UrlMatcher broken and I can find any other documentation. I think that separate module only for routing purpose - not a good idea. Module usually represent an separate application feature and there is no unambiguous relationship with routing

Meligy Over a year ago

Here's the source of truth for UrlMatcher documentation, from source code: github.com/angular/angular/blob/master/modules/%40angular/…

Skyliver Over a year ago

I try but I can't implement matcher for described issue. Also I try to copy defaultUrlMatcher implementation for my lazy module route and I don't receive the same behaviour. I guess that lazy module routes it's a special case for angular router

Meligy Over a year ago

Ensure you have latest Angular packages. Currently 2.4.3

Collectives™ on Stack Overflow

Angular2 routing with lazy modules

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related