Why the router is only matching one route in Angular 5?

Question

I'm developing a client for a rest API using Angular 5 and a lazy loading architecture. I have the following routes in the AppModule that are imported using the RouterModule forRoot() method:

const routes: Routes = [
  {
    path: '',
    loadChildren: 'app/home/home.module#HomeModule',
  },
  {
    path: 'login',
    loadChildren: 'app/login/login.module#LoginModule',
  },
  {
    path: 'register',
    loadChildren: 'app/register/register.module#RegisterModule',
  },
  {
    path: 'forgot-password',
    loadChildren: 'app/forgot-password/forgot-password.module#ForgotPasswordModule',
  },
  {
    path: 'events',
    loadChildren: 'app/events/events.module#EventsModule',
  }
];

And then for HomeModule, LoginModule, RegisterModule and PasswordModule I only have this route for each one:

const routes: Routes = [
  {
    path: '',
    component: ...
  }
];

Each of them is imported using the RouterModule forChild() method. And for the EventsModule the routes are these:

const routes: Routes = [
  {
    path: '',
    component: EventSearchResultsComponent,
  },
  {
    path: 'new',
    component: NewEventComponent,
  },
  {
    path: ':id',
    component: EventDetailsComponent
  }
];

The problem I'm facing is that every route in my application is loading the EventDetailsComponent except for the root route, that is loading correctly the HomeComponent. But if I delete the :id route from the EventsModule all is working fine! Why it stops working when I add the last route?

PS: To navigate to each of these routes I'm only using the routerLink directive like this routerLink="/register">.

Try changing path:’:id’ to something like path:’e/:id’. — Bennett Hardwick, Jan 10 '18 at 10:05

score 1 · Accepted Answer · 2018-01-10T10:33:51.223

1

When you navigate, you should use

[routerLink]="['/register']" // absolute routing
[routerLink]="['register']" // relative routing

This will ease your navigation when you have to handle parameters.

Next, you should remove those lines

  {
    path: '',
    loadChildren: 'app/home/home.module#HomeModule',
  },

Because what's the point of lazily loading a route than will be loaded by default ?

After that, you should define your routes, instead of using

{
  path: '', component: [Home|Register|Login|Password]Component
}

Because all of those routes are equal : defining the lazy loading strategy doesn't actually define routes. The routes in the lazy loading strategy have to match the existing routes, and you have no routes set to [register|home|login|password. EDIT this isn't true

After that, you should not habe the problem (I think), and if so, please let me know what is the new problem so thzt I can help you.

edited Jan 10 '18 at 10:33

answered Jan 10 '18 at 10:07

Hi, thanks a lot for the detailed answer! You are right, It does not make sense to lazy load the root route. I've only changed the root route to be eager loading instead of lazy and magically it's all working as expected... But I don't understand these line `defining the lazy loading strategy doesn't actually define routes.` The lazy loading routes defined in the AppModule are matching with `register|home|login|password` and then in each of those modules the router matches the `''` route right? – Elias Garcia Jan 10 '18 at 10:16
When you define your LL strategy, you write `{ path: 'XXX', loadChildren: 'YYY' }` : **that doesn't define a route**. To define a route, you need to use `path` and `component`. But in your case, all path are empty in your 4 components, meaning all of the 4 routes are the same. This is what I meant by saying that ! Actually, `HomeComponent` have the same route as `LoginComponent` and the other 2 components (or you defined groups somewhere and didn't post it) – Jan 10 '18 at 10:19
I think that that's not correct. When you define a Lazy Loading route like that you are specifying a Module to be loaded when the router matches the `path` key. You can see it here for example https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee – Elias Garcia Jan 10 '18 at 10:25
Well this was one of my issues for a couple of weeks, I actually had to make a bounty on SOF to get an answer to my question, hence my answer. But I will take a look if you don't think so, maybe I didn't understand it correctly ! – Jan 10 '18 at 10:27
Do you have a link to the question to give it a look? Thanks! – Elias Garcia Jan 10 '18 at 10:29
Sure, **[right there !](https://stackoverflow.com/questions/47157010/angular-2-canload-usage)** – Jan 10 '18 at 10:30
1

Oh well actually you're right, I totally inverted the answer :D my bad then ! I'll edit my answer – Jan 10 '18 at 10:31

Why the router is only matching one route in Angular 5?

1 Answers1