Nested routing in Angular

Setup nested level (main ,child, sub-child navigation) of navigation in angular and save time in route debugging.

In this blog will learn about nested level of routing.

Prerequisite — The reader should know how to works with components.

Setup parent or main level routing

When we setup an angular app, it has empty app-routing.module.ts file. Add two routes then the file looks something like below

app-routing.module.ts

Lets looks at html page , it has link for two routes.

[routerlink] — matches with the route define in app-routing.module.ts. It is an array so in case of multiple paths it could be passed as [‘level1’, ‘level2’ ]

[active-link] — this is a css class name, and it will be applied when the link is active.

main navigation link. nested routing being selected

Setup child or sub level navigation

create a module using cli or use existing routing module and rename it.

ng g m RoutingDemo — routing

— routing (double dash) will generate a routing module along with module.

generate a component for child/sub navigation

ng g c RoutingDemo/SubNavigation

add nav and router-outlet inside the html

the child components will rendered below the router outlet element

Let’s add routes inside the routingdemo-routing.module.ts .

important points to note -

1. In the routes, there is must be one parent routes and other routes are child to it.

2. The path is empty as the routename “deeprouting” will put at the app-routing.module.ts so it will be easy to navigates to the child module by looking only at route names

3. The SubNavigationComponent we have created attached to the parent route so that navigation to child routes always render and as per the selected link respective child component will load.

4. In RouterModule the method forChild has been used to import routes. In the app-routing.module.ts it will be forRoot.

5. route has property title, which has been added since v14. This property sets title of the page (refer final output).

Let’s change the app-routing.module to load the RoutingDemoModule. Module have been loaded using lazy-loading.

The code change for lazily loading the RoutingDemoModule.

Finally the page will look like below, two level of routes.

1. deeprouting — set at app-module (parent) level.
2. home — landing page, on empty route redirect to home.

{ path: ‘’, pathMatch: ‘full’, redirectTo: ‘home’ }

final routes snapshot. The page title routing: Home was set in the routes of child

Here we did for two levels for routing, we could go more than that.

The child routing module has one empty route parent it is not the constraint on angular side, I have recommended this for easy debug and understanding of routes.

I have found this way of setup useful and saves my time on route debugging.

Update: angular 15 onwards, route could be setup without routing module using Standalone API.

Angular has added a new function as a part of standalone api named “provideRouter” which accept the routes array(import { Routes } from '@angular/router').

main.ts

routes array is same as before.

for lazy loading, the syntax is same as before, now it accepts a Routes[] as well, so for the sub routing array, file looks like below

app-routing.ts

network tab in chrome showing routing demo module loaded later.

provideRouter method accepts optional router feature. Below is an example of eagerly loading all modules.

eagerly load all modules

Hope you find this useful.

Thank you for your time.