CODEWITHSUNDEEP
angular
Lahiru Chandima
Lahiru Chandima

Reputation: 24128

Angular routing precedence in two modules

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?

Upvotes: 2

Views: 2204

Answers (2)

NitinSingh
NitinSingh

Reputation: 2078

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

Upvotes: 0

Daniel W Strimpel
Daniel W Strimpel

Reputation: 8470

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.

Upvotes: 4

Related Questions