Simplest way to route an Angular module to multiple different modules

Question

I am currently building an application that has a few feature modules that would be available in different parts of the app.

As an example, you have FeatureA:

const routes: Routes = [
  {
    path: '',
    component: FeatureAMainComponent
  },
  {
    path: 'featurea/:var',
    component: SomeComponentThatDoesStuffA
  },
  {
    path: 'create',
    component: CreateAFeatureA
  },
  {
    path: ':id/edit',
    component: EditAFeatureA
  }
];

So this would be available at root/featurea.

Now we have FeatureB:

const routes: Routes = [
  {
    path: '',
    component: FeatureBMainComponent
  },
  {
    path: 'featureb/:var',
    component: SomeComponentThatDoesStuffB
  },
  {
    path: 'create',
    component: CreateAFeatureB
  },
  {
    path: ':id/edit',
    component: EditAFeatureB
  }
];

Very similar routes but they are for two entirely different parts of the application. However, although different they do share one piece of functionality, call it FeatureC in a separate module. From the FeatureA and FeatureB modules' second route, the one with the variable, both need to extend FeatureC's route. So my question is: how would I go about routing FeatureC to get urls like this:

/featurea/:somevariable/featurec/other_stuff_from_feature_c_module_routes
/featureb/:somevariable/featurec/other_stuff_from_feature_c_module_routes

I need to keep the FeatureA/FeatureB routes in the url path but append the FeatureC routes to the end of both of those and still load the same component. I would just need to grab the :somevariable from the params, which is why I'd like to extend the route, as well as for breadcrumb purposes.

Hopefully, this is enough information to answer the question but please let me know if you require more and I will edit.

Answer 1

Check the Stackblitz I made based on your example: https://stackblitz.com/edit/angular-nqp97q

You did not include the app.module.ts but I suppose you'd like to lazy load your feature modules:

const routes: Routes = [
  {
    path: 'feature-a',
    loadChildren: () => import('./feature-a/feature-a.module').then(mod => mod.FeatureAModule),
  }
]

Then you could define the child routes (and "grandchild routes") in the feature modules like this:

const routes: Routes = [
  {
    path: "",
    component: FeatureAMainComponent,
    children: [
      {
        path: ":var",
        component: StuffAComponent,
        children: [
          {
            path: "feature-c-child",
            component: FeatureCComponent
          }
        ]
      },
      {
        path: ":var/feature-c",
        component: FeatureCComponent
      }
    ]
  }
];

The exact structure depends on whether you want to display the child routes hierarchically as children of their parent components. I guess you can go on from here but leave a comment if you need further help.