Angular Child Routes and Lazy Loading Step by step Implementation and Top 10 Questions and Answers
 Last Update:6/1/2025 12:00:00 AM     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    19 mins read      Difficulty-Level: beginner

Angular Child Routes and Lazy Loading

When building complex Single Page Applications (SPAs) using Angular, managing large sets of routes can quickly become challenging. To tackle this, Angular provides a mechanism known as Child Routes which allows you to define nested routes for feature modules, making your application's routing more organized and maintainable. Additionally, Lazy Loading is a powerful technique used to split your application into smaller parts, loading only what’s necessary at runtime to enhance performance.

Understanding Child Routes

Child routes enable you to nest route configurations inside an existing route. They are particularly useful for creating complex UI structures where multiple components interact within the context of a larger parent component.

Example of Child Routes:

Suppose we're developing a blog application with the following URL structure:

  • /dashboard/home
  • /dashboard/profile
  • /dashboard/settings

In this scenario, dashboard acts as a parent route and home, profile, and settings are child routes. Here is a simplified example:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: '', component: HomeComponent },
      { path: 'profile', component: ProfileComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the routing configuration above, when navigating to /dashboard, the DashboardComponent will be loaded, and its router-outlet will render the HomeComponent by default. If you navigate to /dashboard/profile, the ProfileComponent will be rendered inside the same router-outlet.

This approach keeps related routes grouped together, promoting modularity and readability of your codebase.

Benefits of Using Child Routes

  1. Organized Codebase: By nesting related routes within a parent route, your route configuration becomes more intuitive and easier to manage.
  2. Simplified Parent-Child Interactions: It facilitates interactions between a parent component and its children via shared services or input/output properties, enhancing encapsulation and reusability of components.
  3. Enhanced Navigation Experience: Users can easily traverse through nested routes without leaving the parent component, maintaining a cohesive UI experience.

Implementing Lazy Loading in Angular

Lazy loading is another feature that optimizes the performance of Angular applications by breaking down the application into lazy-loaded chunks. This means that instead of loading the entire application at once, Angular loads only the necessary chunks based on user navigation or other triggers.

Steps to Implement Lazy Loading

  1. Generate Feature Modules: Use the Angular CLI to generate a new feature module.

    ng generate module dashboard --route=dashboard --module=app

  2. Move Components to Feature Module: Place all components associated with the dashboard module inside its directory.

  3. Update App Routing for Lazy Loading: Modify the main application routing module to load the DashboardModule lazily.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. Configure Child Routes Within Lazy Loaded Module: Set up child routes just as you would with an eagerly loaded module.
// dashboard-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { SettingsComponent } from './settings/settings.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      { path: '', component: HomeComponent },
      { path: 'profile', component: ProfileComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }
  1. Import DashboardRoutingModule: Ensure that the DashboardRoutingModule is imported in the DashboardModule.
// dashboard.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { SettingsComponent } from './settings/settings.component';

@NgModule({
  declarations: [DashboardComponent, HomeComponent, ProfileComponent, SettingsComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ]
})
export class DashboardModule { }

With these steps, you’ve successfully set up lazy loading combined with child routes. When a user navigates to /dashboard, the DashboardModule (along with its child routes) will be loaded lazily.

Benefits of Lazy Loading

  1. Faster Initial Load Times: By splitting your application into smaller chunks, users benefit from faster initial loads, as only essential code is fetched initially.
  2. Improved Resource Management: Angular intelligently manages the loading of modules, ensuring that resources are used efficiently without loading unnecessary code upfront.
  3. Better User Experience: Users perceive the application to start faster and respond quicker, leading to an enhanced overall experience.

Conclusion

Child routes and lazy loading are two significant features in Angular that help developers build scalable, performant, and maintainable applications. Child routes organize complex route hierarchies by nesting routes within parent routes, while lazy loading optimizes performance by deferring the loading of feature modules until they are needed. Together, these features allow developers to create robust SPAs that deliver exceptional performance and user satisfaction.




Angular Child Routes and Lazy Loading: Step-by-Step for Beginners

Navigating through complex Angular applications can be challenging, especially when dealing with child routes and lazy loading. These concepts help in managing large applications efficiently by breaking them into smaller, manageable pieces and loading only the necessary parts as the user interacts with different modules. In this guide, we'll walk through the process of setting up child routes and implementing lazy loading in an Angular application.

Understanding Child Routes and Lazy Loading

Child Routes: When you have modules which consist of their own sets of routes, these routes are nested within a parent module's routing configuration. Child routes enhance code organization and maintainability.

Lazy Loading: Angular’s lazy loading technique allows you to split your application into smaller bundles that can be loaded on demand or asynchronously. This optimizes performance by reducing the initial load time.

Project Setup

To get started, ensure you have Angular CLI installed. If not, install it using:

npm install -g @angular/cli

Create a new Angular project:

ng new angular-routing-example --routing
cd angular-routing-example

The --routing flag automatically sets up routing in your application.

Creating Feature Modules

First, we need to create some feature modules where each module will contain its own routing configuration.

Let's create two modules named home and dashboard. Use the following commands:

ng generate module home --route home --module app.module
ng generate module dashboard --route dashboard --module app.module

These commands will create the home and dashboard modules along with their respective components and automatically update the app-routing.module.ts file to include these routes.

Next, you need to generate some child routes for the dashboard module. Inside the dashboard folder, create two new components:

ng generate component dashboard/overview
ng generate component dashboard/users

Configuring Child Routes

Inside the dashboard-routing.module.ts, we will define child routes for overview and users.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { OverviewComponent } from './overview/overview.component';
import { UsersComponent } from './users/users.component';

const routes: Routes = [
  {
    path: '', component: DashboardComponent, children: [
      { path: 'overview', component: OverviewComponent },
      { path: 'users', component: UsersComponent },
    ],
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule {}

Here, we've specified that overview and users components should be children of the DashboardComponent. The empty string '' in the path indicates the default child route.

Now, let's configure lazy loading for the home and dashboard modules inside app-routing.module.ts.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

With this setup, the HomeModule and DashboardModule are loaded lazily based on user interaction.

Navigating Through Application Routes

To navigate through the application’s routes, we'll add links to the app.component.html template:

<h1>Angular Routing Example</h1>
<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/dashboard/overview">Overview</a>
  <a routerLink="/dashboard/users">Users</a>
</nav>
<router-outlet></router-outlet>

We have four routerLinks: one for the root-level home route, and three for dashboard routes (with the default being /dashboard).

Inside the dashboard.component.html, add a nested router-outlet so that the child routes (overview and users) can display content.

<h2>Dashboard</h2>
<nav>
  <a routerLink="./overview">Overview</a>
  <a routerLink="./users">Users</a>
</nav>
<!-- child routes rendered here -->
<router-outlet></router-outlet>

We use ./overview and ./users here because they are relative to the current path.

Running the Application

Run the application using:

ng serve

Navigate to http://localhost:4200 in your browser. You should see links to Home, Dashboard, and child routes of Dashboard (Overview and Users).

Click on the links to see the components being loaded dynamically.

Data Flow Visualization

Let's visualize the data flow step-by-step:

  1. Main Application Load:

    • User opens the application.
    • The main app-routing.module.ts is consulted to determine which module/component should be loaded based on the URL.
    • If the URL matches /home or /dashboard, Angular triggers lazy loading by importing the respective module on demand.

  2. Lazy Loaded Home Module:

    • If /home URL is accessed, Angular loads the HomeModule.
    • It then renders the home-component inside the router-outlet of app.component.html.

  3. Lazy Loaded Dashboard Module:

    • If /dashboard URL is accessed, Angular loads the DashboardModule.
    • It renders the DashboardComponent in the router-outlet of app.component.html.

  4. Child Routes in Dashboard:

    • Inside the DashboardComponent, another router-outlet exists.
    • Clicking the Overview link triggers the DashboardRoutingModule, rendering the OverviewComponent in the nested router-outlet.
    • Similarly, clicking Users will render the UsersComponent in the same nested router-outlet.

  5. Nested Router-outlet:

    • Every time a new route is activated, Angular checks the current route configuration.
    • For child routes, it uses a nested router-outlet defined inside parent component templates.

This sequence highlights Angular's modular approach to routing, making it easy to manage larger applications by loading components only when required, thus optimizing both loading times and resource usage.

Summary

By understanding how to set up child routes and implement lazy loading, you can organize your Angular application more effectively. This results in better performance, especially in large applications. Here’s what we covered:

  • Created feature modules (home and dashboard) along with their respective routing modules.
  • Defined child routes inside dashboard-routing.module.ts.
  • Utilized loadChildren technique to enable lazy loading in app-routing.module.ts.
  • Added navigation links in app.component.html and used nested router-outlets to handle navigation within dashboard module.
  • Verified data flow by running the application and navigating through different routes.

This guide should provide a solid foundation for handling Angular routing including child routes and lazy loading in your applications. Happy coding!




Top 10 Questions and Answers on Angular Child Routes and Lazy Loading

1. What are Child Routes in Angular?

Answer: Child routes in Angular come into play when you want to define routes specifically within the scope of a parent route. They allow for a hierarchical structure in your application, making it easier to manage complex navigation. For example, if you have a DashboardComponent that should display different child components (UserComponent, ReportComponent), you can define these as child routes of the DashboardComponent. This is done using the children property within a route configuration.

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'user', component: UserComponent },
      { path: 'report', component: ReportComponent }
    ]
  }
];

2. How do you configure a child route in an Angular application?

Answer: To configure a child route, you first define the parent route, then add a children property with an array of child route configurations. When setting up child routes, always make sure to place a <router-outlet> in the parent component’s template to render the child components. Here's an example:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { UserComponent } from './components/user/user.component';
import { ReportComponent } from './components/report/report.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'user', component: UserComponent },
      { path: 'report', component: ReportComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

dashboard.component.html

<div>
  <h2>Dashboard</h2>
  <router-outlet></router-outlet>
</div>

3. What is Lazy Loading in Angular?

Answer: Lazy loading is an optimization technique in Angular that allows parts of your application to load on demand instead of all at once. This reduces the initial application load time, improving performance, especially in large applications. Instead of bundling all modules into a single JavaScript file, Angular enables you to split the app into smaller chunks called "lazy-loaded" modules.

4. How do you set up Lazy Loading for a module in Angular?

Answer: To set up Lazy Loading, you need to define a route in the AppRoutingModule that points to the module using the loadChildren property with dynamic import() statement. Do not include the module in the AppModule or imports array of any other module. Here’s how you can set up lazy loading for a UsersModule:

app-routing.module.ts

const routes: Routes = [
  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(m => m.UsersModule)
  },
  // other defined routes
];

users.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: '', component: UsersComponent },
  { path: ':id', component: UserDetailComponent }
];

@NgModule({
  declarations: [UsersComponent, UserDetailComponent],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersModule { }

5. What is the difference between eager loading and lazy loading in Angular?

Answer: Eager Loading means that all the modules of the application are loaded at once when the app starts. This is suitable for smaller applications but not optimal for larger applications as it increases the initial loading time. Lazy Loading, on the other hand, loads only the necessary modules when they are required. This is ideal for larger apps as it can improve load times and reduce the initial bundle size.

6. Can you define child routes within a lazy-loaded module?

Answer: Yes, you can define child routes within a lazy-loaded module. Child routes behave similarly to any other routes in your Angular application, following the same hierarchical structure. You just need to ensure that the parent component associated with the lazy-loaded module includes a <router-outlet> to display the child components.

For example, if you have a ProductsModule that is lazy-loaded and you want to define child routes (product-details and product-list), you’d configure it like this:

app-routing.module.ts

const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  }
];

products-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: ':id', component: ProductDetailComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductsRoutingModule { }

7. What are the benefits of using lazy loading in Angular applications?

Answer: The primary benefits of using lazy loading in Angular applications include:

  • Improved Performance: Reduces the initial load time by not loading irrelevant code.
  • Better Resource Management: Only loads the necessary resources when needed.
  • Simplified Development: Keeping application parts separate can make the codebase more maintainable and easier to understand.
  • Scalability: Allows for better scalability as the project grows, making it simpler to add new features without affecting the performance.
  • Separation of Concerns: Each feature can be encapsulated in its own module, making it easier to develop, test, and reuse.

8. How do you handle parameters in lazy-loaded routes and child routes?

Answer: Handling route parameters in lazy-loaded and child routes is the same as in any other route configuration. You define parameters using : syntax in the route path and access them via ActivatedRoute service in the component.

For example, to pass a product ID to a ProductDetailComponent within a lazily loaded ProductsModule:

products-routing.module.ts

const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: ':id', component: ProductDetailComponent }  // params in path
];

product-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    this.productId = id ? +id : null;  // convert id to number
  }
}

9. What considerations should be kept in mind while implementing lazy loading in Angular?

Answer: When implementing lazy loading, consider these key points:

  • Avoid Shared Services: Be careful with services shared across modules. If the same service is used in different modules, ensure it’s registered in a higher-level injector to avoid service duplication.
  • Route Configuration: Ensure that routes are configured correctly in both AppRoutingModule and the lazy-loaded modules.
  • Optimize Lazy Loaded Modules: Be mindful of the size of lazy-loaded modules to keep the load times optimal.
  • Module Interactions: If modules need to interact, consider creating a shared module or using a service for communication.
  • Testing: Test your application thoroughly to ensure that lazy-loaded modules load correctly and that interactions between modules function as expected.

10. Can you use Guards with lazy-loaded routes and child routes in Angular?

Answer: Yes, you can definitely use Angular Guards with both lazy-loaded and child routes. Guards such as CanActivate, CanDeactivate, Resolve, CanLoad (only for lazy-loaded modules), and CanActivateChild can be used to control navigation and handle prerequisites for routes.

For instance, to add a UserAuthGuard to a lazily loaded UsersModule:

app-routing.module.ts

const routes: Routes = [
  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(m => m.UsersModule),
    canActivate: [UserAuthGuard],
    canLoad: [UserAuthGuard]  // specific to lazy loading
  }
];

user-auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, CanLoad, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route } from '@angular/router';

@Injectable()
export class UserAuthGuard implements CanActivate, CanLoad {
  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    const isLoggedIn = /* check user session */;
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
    }
    return isLoggedIn;
  }

  canLoad(route: Route): boolean {
    const isLoggedIn = /* check user session */;
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
    }
    return isLoggedIn;
  }
}

Using Guards helps you ensure that users only access routes for which they have the correct authorization, enhancing security in your application.