Multiple wildcard routes with CanActivate guards in Angular

Question

I want to show pages with custom slugs in my Angular app and have managed to do that by adding a wildcard-route with a CanActivate guard that checks if the current browser path is a slug associated with a page in the CMS:

{
  path: '**',
  loadChildren: './modules/content-page/content-page.module#ContentPageModule',
  canActivate: [IsContentPage]
}

The app loads the ContentPageModule if the page is found but now I'd like the app to show a 404 page if the page was not found. Preferably the URL would stay the same so I don't want to redirect from within the IsContentPage guard. Adding another wildcard route without a guard does not work:

{
  path: '**',
  loadChildren: './modules/not-found/not-found.module#NotFoundModule'
}

With these two routes declared, the app just shows a blank page after the IsContentPage returned false. If the NotFoundModule-route is declared before the ContentPageModule-route, then that one is always fired.

I'm using version 5.2 of Angular Router.

Could someone help me any further? How should I tackle this problem?

axl-code · Accepted Answer · 2018-02-05 15:25:51Z

0

1) There is a bug with lazy loading and wildcard option. Check this answer:

2) It makes no sense to define another wildcard. Doing that Angular wont know which case should use

answered Feb 5, 2018 at 15:25

axl-code

2,3241 gold badge17 silver badges25 bronze badges

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

2 Comments

Olivier Over a year ago

1) Thanks for pointing that out. 2) How would you conditionally show the ContentPage or NotFound modules then? You can't possibly know by the path which modules should be activated so a route parameter isn't sufficient as paths with slashes won't work.

axl-code Over a year ago

The wildcard route is an strategy for intercepting invalid routes, so my recommendation for you is to change the matching strategy. Also because having only one module for all the different paths is a bad practice because you are going to load all the code of the app when this module is loaded, which is not the goal of the lazy loading strategy. Sorry

Collectives™ on Stack Overflow

Multiple wildcard routes with CanActivate guards in Angular

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related