← Back to Articles         
RouterModule.forRoot() vs RouterModule.forChild()

RouterModule.forRoot() vs RouterModule.forChild()

Published on 30 Sep 2026     7 min read Angular
Routing

What is RouterModule.forRoot()?

What is it?

RouterModule.forRoot() is used in NgModule-based Angular applications to configure and register the application's main/root routes.

Syntax:

RouterModule.forRoot(routes)

Example:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent }
];

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

The important idea is:

forRoot()
   ↓
Root-level routing configuration
   ↓
Creates/configures Router services
   ↓
Used once in the application

Full Simple Sample Program

home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h2>Home Page</h2>`
})
export class HomeComponent {
}

products.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-products',
  template: `<h2>Products Page</h2>`
})
export class ProductsComponent {
}

app-routing.module.ts

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

import { HomeComponent } from './home.component';
import { ProductsComponent } from './products.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent }
];

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

app.module.ts

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { ProductsComponent } from './products.component';
import { AppRoutingModule } from './app-routing.module';

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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/">Home</a> |
      <a routerLink="/products">Products</a>
    </nav>

    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

Explanation

The important line is:

RouterModule.forRoot(routes)

It does two important things:

  1. Registers the application's root route configuration.
  2. Sets up the Router-related providers needed for routing.

For example:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent }
];

Angular understands:

/           → HomeComponent
/products   → ProductsComponent

Why is it called forRoot()?

Because it is intended for the root routing configuration of the application.

Normally:

AppRoutingModule
       ↓
RouterModule.forRoot(routes)
       ↓
Application-level Router

How many times?

Normally once in an NgModule-based application.

You should not configure every feature module using:

RouterModule.forRoot(...)

Feature routing modules use forChild() instead.

2. What is RouterModule.forChild()?

What is it?

RouterModule.forChild() is used to register additional routes belonging to a feature module.

Syntax:

RouterModule.forChild(routes)

For example, imagine the application contains a Product feature:

Application
│
├── Home
├── About
│
└── Products
     ├── Product List
     └── Product Details

The main routing configuration can use:

RouterModule.forRoot(...)

while the Product feature routing uses:

RouterModule.forChild(...)

Full Simple Sample Program

Suppose we have a Product feature module.

product-list.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
  `
})
export class ProductListComponent {
}

product-details.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-details',
  template: `
    <h2>Product Details</h2>
  `
})
export class ProductDetailsComponent {
}

product-routing.module.ts

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

import { ProductListComponent } from './product-list.component';
import { ProductDetailsComponent } from './product-details.component';

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

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

product.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProductListComponent } from './product-list.component';
import { ProductDetailsComponent } from './product-details.component';
import { ProductRoutingModule } from './product-routing.module';

@NgModule({
  declarations: [
    ProductListComponent,
    ProductDetailsComponent
  ],
  imports: [
    CommonModule,
    ProductRoutingModule
  ]
})
export class ProductModule {
}

app-routing.module.ts

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

const routes: Routes = [];

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

How Does forChild() Work?

Product routes are:

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

They are registered using:

RouterModule.forChild(routes)

Angular adds these routes to the application's overall router configuration.

Therefore:

/products
      ↓
ProductListComponent


/products/10
      ↓
ProductDetailsComponent

The important point is that forChild() adds routes to the existing Router configuration. It does not create a separate Router instance for the feature.

forRoot() vs forChild()

This is the most important part for interviews.

forRoot() forChild()
Used for root routes Used for feature-module routes
Normally called once Can be called by multiple feature modules
Sets up Router providers Reuses the existing Router services
Usually in AppRoutingModule Usually in feature routing modules
Main application routing Adds additional feature routes

Think of it as:

Application
│
├── AppRoutingModule
│      │
│      └── RouterModule.forRoot(...)
│
├── ProductRoutingModule
│      │
│      └── RouterModule.forChild(...)
│
└── AdminRoutingModule
       │
       └── RouterModule.forChild(...)

Or simply:

forRoot()
   │
   └── Configure the main Router
              │
              ├── forChild(Product routes)
              │
              ├── forChild(Admin routes)
              │
              └── forChild(Order routes)

Why Do We Need forRoot() and forChild()?

Angular applications can contain many feature modules.

For example:

AppModule

├── ProductModule
├── OrderModule
├── CustomerModule
└── AdminModule

Each feature might have its own routing configuration.

Angular needs one Router service, but many modules may contribute routes.

Therefore:

forRoot()
    ↓
Configure root Router

forChild()
    ↓
Add feature routes to that Router

This prevents every feature module from trying to initialize its own root Router configuration.

Important Clarification: forChild() Does Not Mean Child Route

This is a common interview confusion.

RouterModule.forChild() means:

Register routes from a feature NgModule.

It does not specifically mean nested/child routes.

A child route is something different:

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      {
        path: 'details',
        component: ProductDetailsComponent
      }
    ]
  }
];

Here:

children: [...]

defines nested routes.

Whereas:

RouterModule.forChild(routes)

registers a feature module's routes.

So:

forChild()
     ≠
children routes

This distinction is important.

What About Modern Standalone Angular?

With standalone Angular, you normally don't need:

RouterModule.forRoot(routes)

or feature routing modules based on:

RouterModule.forChild(routes)

At application bootstrap, you typically use:

provideRouter(routes)

Example:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

So conceptually:

Old NgModule approach

RouterModule.forRoot(routes)
        ↓
Root Router Configuration


Modern standalone approach

provideRouter(routes)
        ↓
Root Router Configuration

forRoot() and forChild() remain important to understand because you will encounter them in NgModule-based Angular applications and existing enterprise codebases.

Key Points

  • RouterModule.forRoot() configures root-level routing.
  • forRoot() is normally called once.
  • RouterModule.forChild() registers routes from feature NgModules.
  • Multiple feature modules can use forChild().
  • forChild() adds routes to the existing Router configuration.
  • forChild() does not create another Router service.
  • forChild() is not the same thing as child/nested routes.
  • In standalone Angular, root routing is normally configured using:
provideRouter(routes)

Interview Questions and Answers

1. What is RouterModule.forRoot()?

RouterModule.forRoot(routes) configures the root Angular Router with the application's main route configuration and Router providers. It is normally called once in an NgModule-based application.

2. What is RouterModule.forChild()?

RouterModule.forChild(routes) registers additional routes from a feature NgModule while reusing the application's existing Router services.

3. What is the main difference between forRoot() and forChild()?

forRoot()  → Root routing + Router providers

forChild() → Adds feature routes to existing Router

4. Can we call forRoot() multiple times?

Normally, no. The application's root routing configuration should use forRoot() once. Feature routing modules should use forChild().

5. Can multiple modules use forChild()?

Yes. Multiple feature routing modules can contribute their own routes using:

RouterModule.forChild(routes)

6. Does forChild() create another Router instance?

No. It adds feature routes while using the existing application Router.

7. Is RouterModule.forChild() the same as child routes?

No.

RouterModule.forChild(routes)

registers routes from a feature NgModule.

Whereas:

children: [...]

defines nested routes.

8. What replaces RouterModule.forRoot() in standalone Angular?

The modern standalone approach normally uses:

provideRouter(routes)

Interview-ready answer

RouterModule.forRoot() is used once to configure the root Router and application-level routes in an NgModule-based Angular application. RouterModule.forChild() is used by feature NgModules to add their routes to the existing Router configuration without creating another Router service.

Keep Learning - More From This Category

← Back to Articles