CODEWITHSUNDEEP
javascripthtmlangulartypescript
Ole
Ole

Reputation: 47038

Specifying a routerLink for a lazy loaded module component?

In this demo app I have the following route in the lazy loaded books module:

{ path: 'collection', component: CollectionPageComponent },

And in the search component the following router link:

  <a routerLink="collection">Collections</a>

When hovering over the link it displays the path books/collection. However when clicking it it routes to the 404 page. Thoughts?

https://stackblitz.com/edit/angular-temp-slice-demo-phase2?file=src%2Fapp%2Fbooks%2Findex.ts

Upvotes: 2

Views: 58

Answers (1)

Vishnudev Krishnadas
Vishnudev Krishnadas

Reputation: 10960

The route

{ path: ':id', component: ViewBookComponent, resolve: { book: BookResolverService }}

is consuming your string collection as input to id.

To resolve this,

Put specific routes to the top i.e.

{ path: 'collection', component: CollectionPageComponent },
{ path: ':id', component: ViewBookComponent, resolve: { book: BookResolverService }}

Upvotes: 4

Related Questions