forRoot vs. forChild method in Angular

Routing is an important part of any Angular application which makes it important to understand the difference between forRoot and forChild methods provided by the Angular router module. These methods allow us to configure routing within our application. In this article, we’ll understand both of these methods in detail.

In Angular, forRoot and forChild methods are used to configure Angular modules. These methods are primarily used in routing modules to set up routes and services.

forRoot method

The forRoot method is used in the root module (typically app.module.ts) of the Angular application to configure services, routes, and other settings that are shared across the entire application. It is responsible for providing services and configuring routes globally. This method is only called once in the root module.

Syntax:

// Root Module (app.module.ts)
@NgModule({
  imports: [RouterModule.forRoot(routes)],
})
export class AppRoutingModule{}

Features of forRoot:

• Global Configuration: forRoot allows configuration settings to be applied globally across an Angular application.
• Singleton Services: Services provided with forRoot are instantiated as singletons, ensuring consistency and preventing duplication.
• Router Initialization: forRoot sets up initial routes and router configurations at the root level of the application.
• Avoids Multiple Instances: By using forRoot, you prevent the creation of multiple instances of services and configurations throughout the application.
• Library Module Convention: forRoot provides a convention for configuring and initializing library modules at the root level of an application.

Example: In this example, we’ll create a simple angular application with global routing using forRoot method.

Step 1: Create a new Angular project

ng new myApp

Step 2: Create two components using the below commands.

ng generate component home
ng generate component about

Step 3: Open src/app/app-routing.module.ts and define the routes for the components that we create in previous step.

HTML

<!-- home.component.html -->

<h1>This is the Home Page</h1>
<a routerLink="/about">About</a>

HTML

<!-- about.component.html -->

<h1>This is the About Page</h1>
<a routerLink="/">Home</a>

HTML

<!-- app.component.html -->

<router-outlet></router-outlet>

JavaScript

//app.routes.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
];

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

To start the application run the following commands.

ng serve

Output:

forRoot method

forChild Method

The forChild method is used in feature modules to configure routes and other settings that are specific to that module. It allows feature modules to contribute their own routes without interfering with the global configuration set up by forRoot.

This method is used in the feature modules or child modules, especially when lazy loading is getting used. It confgures routes and services specific to that particular feature module. This method can be called multiple times in various feature modules.

Syntax:

// Feature Module (feature.module.ts)
@NgModule({
  imports: [RouterModule.forChild(routes)],
})
export class FeatureModule{}

Features of forChild Method

• Module-specific Configuration: forChild allows configuring routes and settings specific to feature modules.
• Lazy Loading Support: Enables lazy-loaded feature modules to define their own routes without interfering with the global router configuration.
• Multiple Invocations: Unlike forRoot, forChild can be called multiple times within different modules to configure routes and settings.
• Encapsulation: Helps in encapsulating module-specific functionality and settings, promoting a modular architecture.
• Scalability: Supports scalable application development by allowing feature modules to manage their own routes and settings independently.

Example:

Step 1: Create a Feature Module using the below command.

ng generate module feature-module --routing

Step 2: Create a Feature component inside the feature module.

ng generate component feature-module/feature

Code Example:

HTML

<!-- feature.component.html -->

<h1>This is a feature component</h1>

HTML

<!-- home.component.html -->

<h1>This is the Home Page</h1>
<div>
    <a routerLink="/feature">Feature</a>
</div>

JavaScript

//feature-module-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component';

const routes: Routes = [{ path: 'feature', component: FeatureComponent }];

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

JavaScript

//App.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { FeatureModuleModule } from './feature-module/feature-module.module';

@NgModule({
    declarations: [AppComponent, HomeComponent, AboutComponent],
    imports: [BrowserModule, AppRoutingModule, FeatureModuleModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }

Save the changes and run the application

ng serve

Output:

forChild method

Difference Between forRoot and forChild method :

	forRoot	forChild
Purpose	Configures root-level settings	Configures module-specific settings
Where to Use	AppModule or root module	Feature modules or child modules
Usage	Should be called only once in the application	Can be called multiple times within different modules
Effect	Sets up global configurations	Configures routes and settings specific to a feature
Example	RouterModule.forRoot(routes)	RouterModule.forChild(featureRoutes)

Conclusion:

In Angular, forRoot and forChild are two methods used to configure routing and other settings at different levels within an application. forRoot is used in the root module to set up global configurations, while forChild is used in feature modules to configure module-specific settings, such as routes. Understanding the differences between these methods is crucial for structuring and configuring Angular applications effectively.