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.
Table of Content
- forRoot method
- forChild Method
- Difference Between forRoot and forChild method
- Conclusion:
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.
<!-- home.component.html -->
<h1>This is the Home Page</h1>
<a routerLink="/about">About</a>
<!-- about.component.html -->
<h1>This is the About Page</h1>
<a routerLink="/">Home</a>
<!-- app.component.html -->
<router-outlet></router-outlet>
//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:
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:
<!-- feature.component.html -->
<h1>This is a feature component</h1>
<!-- home.component.html -->
<h1>This is the Home Page</h1>
<div>
<a routerLink="/feature">Feature</a>
</div>
//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 { }
//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:
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.
Contact Us