Possible To Only Route To Child If Child Route Is Included Angular?

Question

I can think of a few ways to do this however I feel like there is an easier way than passing in some sort of parameter and then searching for it in the other routing module...

I have my main app routing component where one of the routes looks like so:

{ path: 'individual', loadChildren: () => import('./modules/indv/indv.module').then(m => m.IndvModule) },

However I do not want to route to this module if no child url parameter is used. So for instance if the user types : /individual the url will just go back to the default route but if the user types /individual/about-me then the routing will direct into that module and go to the child route which goes to the about-me component.

I tried something along the lines of this:

 { path: 'individual/**', loadChildren: () => import('./modules/indv/indv.module').then(m => m.IndvModule) },

thinking that the asterisks would act like the wild-card route but this did not work...

I can't really find anything in the documentation that links to something like this as well? Does anyone have any suggestions as to how this would be possible?

Answer 1

So, after some research, these are the conclusions I came to:

If you want to be able to directly access child routes inside invidiual module, you'll have to explicitly declare them in that module:

// individual.module.ts
const routes: Routes = [
 { path: '', component: IndividualComponent },
 // Declaring this route is important!
 { path: 'about-me', component: AboutMeComponent },
];

and, in the parent module, declare the main route of your module(i.e individual) and all its children:

// parent-of-individual.module.ts
{
   path: 'individual',
   loadChildren: () => import('./individual/individual.module').then(m => m.IndividualModule)
 },
 {
   path: 'individual/about-me',
   loadChildren: () => import('./individual/individual.module').then(m => m.IndividualModule)
 },

Now, if you don't want your route /individual to be accessed, you can make use of guards.

You'll need a canLoad guard, so you can be sure that the module won't be loaded nor accessed if the route path is /individual. Also, this guard must be used in the parent module, because you want to check first if you have access to that module and the load it.

// can-load-individual.guard.ts
if (segments.length === 1) {
      // If the route `/individual` (without any nested routes) has been accessed
      // stop the navigation to this module
      this.router.navigate(['/']);

      return false;
    }

    return true;

A canActivate route will also be needed, as you do not want to access that route if the module has already been loaded(because you went to individual/about-me). This will be used in the individual module.

// can-activate-child.guard.ts
if (state.url === '/individual') {

      this.router.navigate(['/'])

      return false;
    }

    return true;

Here is a StackBlitz example.

Answer 2

You can define root level routes in this manner:

const routes: Routes = [
  { path: '', component: HelloComponent },
  { path: 'individual', loadChildren: () => import('./indv.module').then(m => m.IndvModule) } 
];

Here as you can see default component is HelloComponent and lazily loaded module is individual module. Now lazily loaded module's route configuration looks like this:

const childRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full'},
  { path: 'about-me', component: AboutMeComponent }
];

Here, if someone just types individual then route is triggered to lazily loaded module but since lazily loaded module configuration only has the name of the module, Angular has no way of knowing which component to load. That is the reason Angular combines lazily loaded module's route configuration with the route configuration where loadChildren property is declared. So in this case the combination is individual and ''. This combination suggests to redirectTo '/' which in this case is equal to routing to HelloComponent declared in the root route configuration.

Now when user types individual/about-me then AboutMeComponent component is loaded due to parent child route combination.

To get clearer idea look at this stackblitz: https://stackblitz.com/edit/angular-m1uonf