In Everyday Market, let's implement the following routes:

• /products: This is the default route that displays the product's listing homepage.
• /products/new : This displays the form to create a new product.
• /products/:id : This displays product details for the specified product id. The fact that the id is prefixed with a colon instructs Angular Router to treat it as a parameter and match it with the URL.

These routes are illustrated in the following diagram:

Using Angular Router, let's implement client-side routing with the following steps:

1. Create the components to be used in the new routes with the following command:

 ng generate component modules/market/product-view-page

 ng generate component modules/market/product-edit-page

2. Define the market routes configuration in market.module.ts as follows:
   1. Import RouterModule and Routes from the @angular/router package.
   2. Create a routes configuration object.
   3. Import RouterModule as part of MarketModule.
   4. You can remove the exported ProductsPageComponent component from MarketModule, since it is now part of the route configuration and AppModule should no longer use it directly.

The code for the preceding steps looks as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
 
import { SharedModule } from '../shared/shared.module';
 
import { ProductsPageComponent } from './products-page/products-page.component';
import { CategoryMenuItemComponent } from './category-menu-item/category-menu-item.component';
import { CategoryMenuComponent } from './category-menu/category-menu.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductCardComponent } from './product-card/product-card.component';
import { ProductViewPageComponent } from './product-view-page/product-view-page.component';
import { ProductEditPageComponent } from './product-edit-page/product-edit-page.component';
 
const routes: Routes = [
  { path: 'products', component: ProductsPageComponent },
  { path: 'products/new', component: ProductEditPageComponent },
  { path: 'products/:id', component: ProductViewPageComponent },
];
 
@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes),
  ],
  declarations: [
    ProductsPageComponent,
    CategoryMenuItemComponent,
    CategoryMenuComponent,
    ProductListComponent,
    ProductCardComponent,
    ProductViewPageComponent,
    ProductEditPageComponent,
  ],
})
export class MarketModule { }

As you can see in the preceding code, the routes configuration is an object of the Routes type, which is the array of a route configuration. The key properties for a route configuration are the following:

• path: This represents the URL path for which the route is considered a match.
• component: This defines the component that should be mounted if the route matches.
• pathMatch: This defines the match rule policy, which is used in AppModule. When set to full, the match policy forces a complete match.

Then you attach the route configuration while importing the RouterModule into the root module. RouterModule provides two key methods: forRoot and forChild.

The paradigm of forRoot/forChild is a common method in Angular for modules to respond differently, depending on whether they are imported in the root or child modules, which is usually related to lazy-loaded modules and associated providers.
This is considered an advanced subject and is not covered as part of this book, you can read more about it here if you like - https://angular.io/guide/lazy-loading-ngmodules#forroot-and-forchild, https://angular.io/guide/singleton-services#forroot.

To simplify, typically, the root module is the one that is bootstrapped in the main.ts file, which, in this case, is the AppModule. The routes you defined in the preceding code are defined as part of a different module, the MarketModule, which is therefore considered a child module, and the forChild method is used.

Now that you have the MarketModule routes in place, implement the default route configuration and edit the template by following the next steps:

1. Define the app routes configuration in app.module.ts:
   1. Import RouterModule and Routes from the @angular/router package.
   2. Create a routes configuration object.
   3. Import RouterModule as part of AppModule, as follows:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { SharedModule } from './modules/shared/shared.module';
import { MarketModule } from './modules/market/market.module';
import { CoreModule } from './modules/core/core.module';
 
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'products' },
];
 
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    CoreModule,
    SharedModule,
    MarketModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

As you can see in the preceding code, the routes configuration includes a default path: '' route. A default route simply redirects the app to the relevant route, and therefore doesn't specify a component itself. Additionally, pathMatch is set to full, as otherwise, this route path would match against every URL. Then you attach the route configuration using the RouterModule, only this time you use forRoot, since this is the AppModule, which is bootstrapped in main.ts file, hence it's the root module.

2. Use router-outlet to instruct Angular as to where route components are to be mounted:
   1. Open app.component.html
   2. Replace the app products page with a router-outlet:

<app-header></app-header>
<div class="main-area">
  <router-outlet></router-outlet>
</div>

Due to the fact that the app layout includes the header across all pages, you can simply mount routed components into the main area section in this case.

That's it! You can now run the app and see if it first navigates to /products due to the default route configuration and whether the products page is displaying correctly. To test other routes, you can simply change the URL manually at this point; for example, try changing /products/new to /products/1.