Angular routing precedence in two modules

Question

If an angular app has two modules: AppModule and ProfileModule , they can have their own routing configured.

In this guide, it says that the order of the routing configuration is important. For an example:

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

Here, the crisis-center path is evaluated first, and ** path is evaluated last.

But, if AppModule and ProfileModule has their own routing configured, it is not clear how the evaluation for a certain route happens. If AppModule routing configuration has a ** route in the end as in above configuration, this would match all routes which doesn't match to other routes in the AppModule . This would make the routing config of ProfileModule useless.

So, how does the precedence of routes work when there are multiple modules with their own routing configs?

Answer 1

According to those Angular Docs :

Each routing module augments the route configuration in the order of import. If you list AppRoutingModule first, the wildcard route will be registered before the hero routes. The wildcard route — which matches every URL — will intercept the attempt to navigate to a hero route.

So, the order is based on the order you imported the modules. In your example, you would need to import the ProfileModule first so the ** route at the end of the AppModule route list didn't prevent any other routes from being processed.

Answer 2

In cases of multiple modules, the wildcard route should be one in entire application, as if present in each module, the one module's route imported first will take precedence over entire route set of all other modules..

1. Import ModA routes

   const ModA_Route = [
   {path: 'moda', component: ModAComp},
   {path: 'moda:id', component: ModADetailComp}
   no default route here ]

2. Import ModB routes

   const ModB_Route = [ {path: 'modb', component: ModBComp},
   {path: 'modb:id', component: ModBDetailComp}
   no default route here ]

3. Now the default route... This to land in the application's own welcome page or similar

If you add a default route for module, how will that differentiate from any other module's default route... The entry point for a module (app/modA or app/modB) itself should be the default entry point for the module itself.. Anything else should be defaulted to the application's own logic