RouterModule configuration in Angular - Step-by-Step Execution

Concept Flow - RouterModule configuration

Import RouterModule

↓

Define Routes Array

↓

Call RouterModule.forRoot(routes)

↓

Add RouterModule to imports in @NgModule

↓

Angular sets up routing

↓

App listens for URL changes

↓

Display matching component

The app imports RouterModule, defines routes, configures RouterModule with routes, and Angular updates the view based on URL changes.

Execution Sample

Angular

import { RouterModule } from '@angular/router';

const routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

@NgModule({ imports: [RouterModule.forRoot(routes)] })

This code sets up routing with two routes: 'home' and a redirect from '' to 'home'.

Execution Table

Step	Action	Input/State	Result/Output
1	Import RouterModule	None	RouterModule available for configuration
2	Define routes array	Empty routes	Routes array with 2 route objects created
3	Call RouterModule.forRoot(routes)	Routes array	RouterModule configured with routes
4	Add RouterModule to imports	NgModule imports array	Routing enabled in Angular app
5	App starts, URL is '/'	URL '/'	Redirects to '/home' route
6	Router matches '/home'	URL '/home'	HomeComponent displayed
7	User navigates to '/home'	URL changes to '/home'	HomeComponent remains displayed
8	User navigates to unknown path	URL '/unknown'	No match, default behavior (usually 404 or empty)
9	Exit	No more navigation	Routing stable and ready for user interaction

💡 Routing setup completes after configuring RouterModule and handling initial URL.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
routes	undefined	[{path:'home',component:HomeComponent},{path:'',redirectTo:'home',pathMatch:'full'}]	Passed to forRoot()	Configured in RouterModule	Used to match URL '/'	Used to match URL '/home' and others

Key Moments - 3 Insights

Why do we use RouterModule.forRoot(routes) instead of just RouterModule?

RouterModule.forRoot(routes) sets up the router with the routes array once for the whole app, as shown in step 3 of the execution_table.

What happens when the URL is '/' and there is a redirect route?

At step 5, the router sees the empty path '' and redirects to 'home', so the URL changes to '/home' and HomeComponent is displayed.

Why do we add RouterModule to the imports array in @NgModule?

Adding RouterModule to imports (step 4) tells Angular to enable routing features in the app module, making the routes active.

Visual Quiz - 3 Questions

Look at the execution_table, what component is displayed when the URL is '/home'?

A Redirect component

B No component

C HomeComponent

D UnknownComponent

💡 Hint

Check step 6 in the execution_table where URL '/home' matches HomeComponent.

At which step does Angular configure the RouterModule with the routes array?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the action 'Call RouterModule.forRoot(routes)' in the execution_table.

If we remove the redirect route, what happens when the URL is '/'?

A No route matches, so no component displays

B It displays HomeComponent

C It redirects to '/home'

D App crashes

💡 Hint

Refer to step 5 where redirectTo handles empty path; without it, no match occurs.

Concept Snapshot

RouterModule configuration:
- Import RouterModule from '@angular/router'
- Define routes array with path and component
- Use RouterModule.forRoot(routes) in imports
- Angular listens to URL changes
- Displays component matching current route
- Redirects handled by redirectTo route

Full Transcript

This visual execution shows how Angular's RouterModule is configured step-by-step. First, RouterModule is imported. Then, a routes array is defined with paths and components. Next, RouterModule.forRoot(routes) is called to configure routing. This configured RouterModule is added to the NgModule imports to enable routing in the app. When the app starts, Angular checks the current URL. If the URL is '/', the redirect route sends it to '/home'. The router matches '/home' and displays HomeComponent. If the user navigates to unknown paths, no matching route is found. This setup allows Angular to update the displayed component based on the URL, enabling navigation in the app.

Practice

1. What is the main purpose of RouterModule.forRoot(routes) in an Angular app?

easy

A. To create a new Angular component

B. To configure the app's routes and enable navigation based on URL paths

C. To style the app's components

D. To fetch data from a server

Solution

1. Step 1: Understand RouterModule role

   RouterModule is used to manage navigation and views based on URL paths in Angular.

2. Step 2: Role of forRoot method

   The forRoot method sets up the routes for the whole app, telling Angular which component to show for each path.

3. Final Answer:

   To configure the app's routes and enable navigation based on URL paths -> Option B

4. Quick Check:

   RouterModule.forRoot sets routes [OK]

Hint: Remember: forRoot sets main routes once per app [OK]

Common Mistakes:

• Confusing forRoot with creating components
• Thinking RouterModule styles components
• Assuming it fetches data

2. Which of the following is the correct syntax to import RouterModule with routes in an Angular module?

easy

A. RouterModule(routes)

B. imports: RouterModule.forRoot(routes)

C. imports: [RouterModule.forRoot(routes)]

D. RouterModule.import(routes)

Solution

1. Step 1: Check Angular module imports syntax

   Angular modules expect an array for the imports property.

2. Step 2: Correct use of RouterModule.forRoot

   RouterModule.forRoot(routes) returns a module configured with routes and must be inside an array.

3. Final Answer:

   imports: [RouterModule.forRoot(routes)] -> Option C

4. Quick Check:

   Imports must be an array with forRoot call [OK]

Hint: Always wrap RouterModule.forRoot in an array for imports [OK]

Common Mistakes:

• Omitting the array brackets in imports
• Using RouterModule.import which doesn't exist
• Calling RouterModule as a function directly

3. Given this route configuration:

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

What component will Angular display when the URL path is /about?

medium

A. AboutComponent

B. HomeComponent

C. No component, shows error

D. Both HomeComponent and AboutComponent

Solution

1. Step 1: Match URL path to route

   The URL path '/about' matches the route with path 'about'.

2. Step 2: Identify component for matched route

   The route with path 'about' uses AboutComponent.

3. Final Answer:

   AboutComponent -> Option A

4. Quick Check:

   Path '/about' shows AboutComponent [OK]

Hint: Match URL path exactly to route path to find component [OK]

Common Mistakes:

• Assuming empty path '' matches '/about'
• Thinking multiple components show at once
• Expecting error for valid path

4. Identify the error in this RouterModule configuration:

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'profile' component: ProfileComponent }
];

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

medium

A. Routes array should be inside imports array

B. RouterModule.forRoot should be RouterModule.forChild

C. AppRoutingModule should not export RouterModule

D. Missing comma between 'profile' path and component property

Solution

1. Step 1: Check routes array syntax

   Between 'path: 'profile'' and 'component: ProfileComponent' a comma is missing, causing syntax error.

2. Step 2: Verify RouterModule usage and exports

   Using RouterModule.forRoot(routes) and exporting RouterModule is correct here.

3. Final Answer:

   Missing comma between 'profile' path and component property -> Option D

4. Quick Check:

   Comma missing in object properties causes error [OK]

Hint: Check commas between object properties in routes [OK]

Common Mistakes:

• Confusing forRoot and forChild usage
• Placing routes array incorrectly
• Removing exports of RouterModule

5. You want to add a default route that redirects empty path '' to '/home' using RouterModule. Which configuration is correct?

hard

A. { path: '', redirectTo: '/home', pathMatch: 'full' }

B. { path: '', redirectTo: 'home' }

C. { path: '', component: HomeComponent, redirectTo: '/home' }

D. { redirectTo: '/home', path: '', pathMatch: 'prefix' }

Solution

1. Step 1: Understand redirectTo usage

   To redirect from '' path, use redirectTo with full path and specify pathMatch as 'full' to match exact empty path.

2. Step 2: Check options for correct syntax

   { path: '', redirectTo: '/home', pathMatch: 'full' } correctly uses redirectTo with '/home' and pathMatch: 'full'. { path: '', redirectTo: 'home' } misses pathMatch, C wrongly combines component and redirectTo, D uses 'prefix' which causes partial matching issues.

3. Final Answer:

   { path: '', redirectTo: '/home', pathMatch: 'full' } -> Option A

4. Quick Check:

   Redirect empty path with pathMatch 'full' [OK]

Hint: Use pathMatch: 'full' when redirecting empty path [OK]

Common Mistakes:

• Omitting pathMatch property
• Combining component with redirectTo
• Using pathMatch: 'prefix' for empty path redirect