Defining routes array in Angular - Step-by-Step Execution

Concept Flow - Defining routes array

Start: Define routes array

↓

Create route objects with path & component

↓

Add route objects to routes array

↓

Pass routes array to RouterModule.forRoot()

↓

Angular reads routes array

↓

Router matches URL to path

↓

Render matched component

↓

End

This flow shows how Angular uses a routes array to map URL paths to components for navigation.

Execution Sample

Angular

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

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

Defines a routes array with two routes: the home path and the about path, each linked to a component.

Execution Table

Step	Action	Routes Array State	Router Behavior
1	Import Routes and components	[]	No routing yet
2	Create route object { path: '', component: HomeComponent }	[{ path: '', component: HomeComponent }]	Router ready to match '' path
3	Create route object { path: 'about', component: AboutComponent }	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	Router ready to match 'about' path
4	Export routes array	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	Routes array available for RouterModule
5	RouterModule.forRoot(routes) called	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	Router listens to URL changes
6	User navigates to '/'	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	Router matches '' path, renders HomeComponent
7	User navigates to '/about'	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	Router matches 'about' path, renders AboutComponent
8	User navigates to '/contact'	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	No match found, router may show fallback or nothing

💡 Routing stops when URL matches no path or user leaves app.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
routes	undefined	[{ path: '', component: HomeComponent }]	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]	[{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]

Key Moments - 3 Insights

Why do we use an array of objects for routes instead of a single object?

Because each route needs its own path and component, so we list them as separate objects inside an array, as shown in execution_table rows 2 and 3.

What happens if the user navigates to a path not defined in the routes array?

The router cannot find a matching route, so it may show a fallback page or nothing, as seen in execution_table row 8.

Why is the empty string '' used as a path in the routes array?

The empty string '' represents the default or home path, so when the URL is '/', the router matches this route and renders the HomeComponent, as in execution_table row 6.

Visual Quiz - 3 Questions

Look at the execution_table, what is the routes array after step 3?

A [{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]

B [{ path: '', component: HomeComponent }]

C []

D [{ path: 'about', component: AboutComponent }]

💡 Hint

Check the 'Routes Array State' column at step 3 in execution_table.

At which step does the router start listening to URL changes?

A Step 4

B Step 5

C Step 6

D Step 2

💡 Hint

Look for 'RouterModule.forRoot(routes) called' in the 'Action' column of execution_table.

If we add a route { path: 'contact', component: ContactComponent }, how would the routes array look after step 3?

A [{ path: 'contact', component: ContactComponent }]

B [{ path: '', component: HomeComponent }, { path: 'contact', component: ContactComponent }]

C [{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent }]

D [{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]

💡 Hint

Adding a new route appends it to the routes array as shown in variable_tracker and execution_table.

Concept Snapshot

Defining routes array in Angular:
- Use an array of objects, each with 'path' and 'component'.
- Example: [{ path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }]
- Pass this array to RouterModule.forRoot() to enable routing.
- Router matches URL paths to components to render.
- Empty string path '' means the home page.

Full Transcript

In Angular, we define navigation paths using a routes array. Each route is an object with a 'path' string and a 'component' to show. We create this array step-by-step by adding route objects. Then we export it and pass it to RouterModule.forRoot(). Angular reads this array to match the current URL path and render the correct component. For example, the empty string path '' matches the home page URL '/'. If the user navigates to a path not in the array, no component is shown or a fallback can appear. This process helps Angular know what to show when users move around the app.

Practice

1. What does the routes array in Angular define?

easy

A. It defines the styles for each component.

B. It lists all services used in the app.

C. It tells Angular which component to show for each URL path.

D. It sets the database connection strings.

Solution

1. Step 1: Understand the purpose of routes array

   The routes array maps URL paths to components so Angular knows what to display.

2. Step 2: Eliminate unrelated options

   Styles, services, and database connections are not handled by routes.

3. Final Answer:

   It tells Angular which component to show for each URL path. -> Option C

4. Quick Check:

   Routes array = component mapping [OK]

Hint: Routes array links URL paths to components [OK]

Common Mistakes:

• Confusing routes with styles or services
• Thinking routes handle backend connections
• Assuming routes define component logic

2. Which of the following is the correct way to define a route for path 'home' with component HomeComponent?

easy

A. { path: 'home', component: HomeComponent }

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

C. { route: 'home', component: HomeComponent }

D. { path: 'home', component: 'HomeComponent' }

Solution

1. Step 1: Check correct property names

   The route object must have path and component properties.

2. Step 2: Verify component value type

   The component value should be the component class, not a string or redirect.

3. Final Answer:

   { path: 'home', component: HomeComponent } -> Option A

4. Quick Check:

   Use path and component keys correctly [OK]

Hint: Use component class, not string or redirectTo for components [OK]

Common Mistakes:

• Using 'route' instead of 'path'
• Setting component as a string
• Using redirectTo instead of component for components

3. Given this routes array:

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

What component will Angular show when the URL path is '/contact'?

medium

A. HomeComponent

B. AboutComponent

C. No component, error occurs

D. NotFoundComponent

Solution

1. Step 1: Match URL path to routes

   Path '/contact' does not match '' or 'about'.

2. Step 2: Use wildcard '**' route

   The '**' path catches all unmatched URLs and shows NotFoundComponent.

3. Final Answer:

   NotFoundComponent -> Option D

4. Quick Check:

   Wildcard '**' = NotFoundComponent [OK]

Hint: Unmatched paths go to '**' route component [OK]

Common Mistakes:

• Assuming empty path matches all URLs
• Thinking unmatched paths cause errors
• Confusing wildcard '**' with empty path

4. Identify the error in this routes array:

const routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', redirectTo: 'user' },
  { path: 'user', component: UserComponent }
];

What is wrong with the route for 'profile'?

medium

A. redirectTo should be used with pathMatch property.

B. redirectTo cannot be used in routes array.

C. component is missing for 'profile' route.

D. Path 'user' should be capitalized.

Solution

1. Step 1: Check redirectTo usage

   When using redirectTo, Angular requires a pathMatch property to specify matching strategy.

2. Step 2: Confirm missing pathMatch causes error

   Without pathMatch, Angular cannot decide when to redirect, causing routing errors.

3. Final Answer:

   redirectTo should be used with pathMatch property. -> Option A

4. Quick Check:

   redirectTo needs pathMatch [OK]

Hint: Always add pathMatch with redirectTo routes [OK]

Common Mistakes:

• Omitting pathMatch with redirectTo
• Thinking redirectTo needs component
• Assuming path names must be capitalized

5. You want to define routes so that:
- The home page shows HomeComponent at path ''.
- The about page shows AboutComponent at path 'about'.
- Any unknown path redirects to home.

Which routes array correctly implements this?

hard

A. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '' }
]

B. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '', pathMatch: 'full' }
]

C. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '*', redirectTo: '', pathMatch: 'full' }
]

D. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', component: HomeComponent }
]

Solution

1. Step 1: Check wildcard path for unknown URLs

   The wildcard path for unknown URLs is '**', not '*'.

2. Step 2: Confirm redirectTo usage with pathMatch

   Redirect routes must include pathMatch: 'full' to work properly.

3. Step 3: Verify redirect target and components

   Redirecting '**' to '' sends unknown URLs to home page correctly.

4. Final Answer:

   [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: '**', redirectTo: '', pathMatch: 'full' } ] -> Option B

5. Quick Check:

   Use '**' with redirectTo and pathMatch 'full' [OK]

Hint: Use '**' wildcard with redirectTo and pathMatch 'full' [OK]

Common Mistakes:

• Using '*' instead of '**' for wildcard
• Omitting pathMatch in redirectTo routes
• Using component instead of redirectTo for redirects