RouterModule configuration in Angular - Mini Project: Build & Apply

RouterModule configuration

📖 Scenario: You are building a simple Angular app with navigation between two pages: Home and About.Users should be able to click links to switch pages without reloading the browser.

🎯 Goal: Create a basic Angular RouterModule setup with two routes: '' for HomeComponent and 'about' for AboutComponent.Configure the router in the main app module.

📋 What You'll Learn

Create a routes array with two routes: path '' for HomeComponent and path 'about' for AboutComponent

Create a variable called routes to hold the routes array

Import RouterModule and configure it with RouterModule.forRoot(routes)

Add RouterModule to the imports array of the @NgModule decorator

💡 Why This Matters

🌍 Real World

Routing is essential in Angular apps to create multi-page experiences without full page reloads, improving user experience.

💼 Career

Understanding RouterModule configuration is a key skill for Angular developers working on real-world web applications with navigation.

1

Create routes array

Create a constant called routes that is an array with two route objects: one with path: '' and component: HomeComponent, and another with path: 'about' and component: AboutComponent.

Angular

# Create a constant called routes with two route objects
# Your code here

Need a hint?

Use const routes = [ ... ] with two objects inside.

2

Import RouterModule and configure

Import RouterModule from @angular/router and create a constant called appRoutingModule that calls RouterModule.forRoot(routes).

Angular

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

// Import RouterModule and create appRoutingModule
# Your code here

Need a hint?

Use import { RouterModule } from '@angular/router'; and then const appRoutingModule = RouterModule.forRoot(routes);

3

Add RouterModule to NgModule imports

In the @NgModule decorator, add appRoutingModule to the imports array.

Angular

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

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

const appRoutingModule = RouterModule.forRoot(routes);

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule],  // Add appRoutingModule here
  bootstrap: [AppComponent]
})
export class AppModule { }

Need a hint?

Make sure appRoutingModule is inside the imports array.

4

Add router-outlet to AppComponent template

In the AppComponent template, add the <router-outlet></router-outlet> tag to display routed components.

Angular

 tag inside AppComponent template -->

Need a hint?

Use the <router-outlet></router-outlet> tag exactly inside the template.