**Course Title:** Mastering Angular: Building Scalable Web Applications **Section Title:** Routing and Navigation **Topic:** Implement a multi-page application with routing and lazy loading of modules.(Lab topic) **Topic Description:** In this lab, you'll apply the routing concepts you've learned so far to build a multi-page application with routing and lazy loading of modules. By the end of this lab, you'll have a better understanding of how to structure and implement routing in a real-world application. **Learning Objectives:** * Understand the concept of feature modules and how they relate to routing * Learn how to implement routing for a multi-page application * Understand how to lazy load modules to improve application performance * Apply routing concepts to a real-world application **Prerequisites:** * Familiarity with Angular routing concepts (covered in previous topics) * Understanding of feature modules and how they're used in Angular applications **Step 1: Creating a Multi-Page Application Structure** Create a new Angular project using the Angular CLI or open an existing project. Create the following folders and files: * **app**: The main application module * **features**: A folder containing feature modules for the application * **features/dashboard**: A feature module for the dashboard page * **features/about**: A feature module for the about page * **app-routing.module.ts**: The application routing module * **dashboard-routing.module.ts**: The dashboard feature module routing configuration * **about-routing.module.ts**: The about feature module routing configuration **Step 2: Configuring Application Routing** In the `app-routing.module.ts` file, add the following code to configure the application routing: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { path: 'dashboard', loadChildren: './features/dashboard/dashboard.module#DashboardModule' }, { path: 'about', loadChildren: './features/about/about.module#AboutModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` In the above code, we've configured the application routing to include three routes: * An empty route that redirects to the dashboard page * A route for the dashboard page that lazy loads the `DashboardModule` * A route for the about page that lazy loads the `AboutModule` **Step 3: Configuring Feature Module Routing** In the `dashboard-routing.module.ts` file, add the following code to configure the dashboard feature module routing: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './dashboard.component'; const routes: Routes = [ { path: '', component: DashboardComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class DashboardRoutingModule { } ``` In the above code, we've configured the dashboard feature module routing to include a single route for the dashboard component. Similarly, in the `about-routing.module.ts` file, add the following code to configure the about feature module routing: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AboutComponent } from './about.component'; const routes: Routes = [ { path: '', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class AboutRoutingModule { } ``` **Step 4: Implementing Lazy Loading** In the `app.module.ts` file, add the following code to import the `AppRoutingModule`: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` In the above code, we've imported the `AppRoutingModule` to enable application routing. **Step 5: Running the Application** Run the application using `ng serve`. **Key Takeaways:** * Feature modules are used to organize related components and services in an application. * Routing can be configured for each feature module to enable navigation between pages. * Lazy loading is used to load feature modules on demand to improve application performance. * The `loadChildren` property is used to lazy load feature modules in the application routing configuration. **Additional Resources:** * [Angular Routing Documentation](https://angular.io/guide/router) * [Angular Lazy Loading Documentation](https://angular.io/guide/router#lazy-loading-route-configuration) **Comments and Questions:** Please leave a comment below if you have any questions or need help with implementing the concepts covered in this lab. Next Topic: Understanding template-driven forms and reactive forms (From: Forms and User Input). **Course Navigation:** You can navigate to the next topic by clicking on the link above. You can also navigate to previous topics or sections by clicking on the relevant links in the course navigation menu. **Course Materials:** You can download the course materials for this topic, including the code examples and slides, by clicking on the "Course Materials" link in the course navigation menu.