Angular Feature Module Creation

This challenge focuses on a fundamental aspect of Angular development: organizing your application into reusable and maintainable feature modules. You will create a new feature module that encapsulates a specific piece of functionality, demonstrating your understanding of Angular's modular architecture and how to integrate new modules into an existing application.

Problem Description

Your task is to create a new Angular feature module named Products within an existing Angular project. This module should be responsible for managing product-related features, such as displaying a list of products and viewing individual product details.

Key Requirements:

• Module Creation: Generate a new Angular module named ProductsModule.
• Component Integration: Create at least two components within this module:
  • ProductListComponent: To display a list of products.
  • ProductDetailComponent: To show details of a single product.
• Routing: Implement routing within the ProductsModule to navigate between the ProductListComponent and ProductDetailComponent. The ProductDetailComponent should accept a product ID as a route parameter.
• Module Declaration and Exports: Ensure the components are declared within ProductsModule and exported appropriately so they can be used by other modules.
• Lazy Loading (Optional but Recommended): Configure the main application module (e.g., AppModule) to lazy-load the ProductsModule. This improves initial load times.
• Module Integration: Import the ProductsModule into the AppModule (or another appropriate module if lazy loading).

Expected Behavior:

When the application is running, navigating to a specific route (e.g., /products) should display the ProductListComponent. Clicking on a product in the list should navigate to a route like /products/:id, displaying the ProductDetailComponent with the details of the selected product.

Edge Cases:

• What happens if an invalid product ID is provided in the route? (For this challenge, you can assume a basic handling mechanism, such as displaying a "Product not found" message, or simply letting Angular's routing handle it.)
• Ensure the module and its components are correctly registered and accessible.

Examples

Example 1: Module Generation and Basic Setup

Input:

Assume a standard Angular CLI project.

Command to generate module and components:

ng generate module products --route products --module app.module.ts
ng generate component products/product-list --module products
ng generate component products/product-detail --module products

Expected Output (Conceptual):

The Angular CLI will create the following files and directories:

src/
├── app/
│   ├── app-routing.module.ts
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   ├── app.module.ts
│   └── products/
│       ├── products-routing.module.ts  <-- New
│       ├── products.component.html   <-- If --route was used with a component
│       ├── products.component.scss
│       ├── products.component.ts
│       ├── products.module.ts        <-- New
│       ├── product-list/             <-- New
│       │   ├── product-list.component.html
│       │   ├── product-list.component.scss
│       │   ├── product-list.component.spec.ts
│       │   └── product-list.component.ts
│       └── product-detail/           <-- New
│           ├── product-detail.component.html
│           ├── product-detail.component.scss
│           ├── product-detail.component.spec.ts
│           └── product-detail.component.ts
└── ... other project files

The app-routing.module.ts will have an entry for the products route, likely configured for lazy loading. The products.module.ts will declare ProductListComponent and ProductDetailComponent. The products-routing.module.ts will define routes for /products (to ProductListComponent) and /products/:id (to ProductDetailComponent).

Explanation:

The ng generate commands automate the creation of the module, its routing module, and the components, setting up the basic structure for the feature module. The --route products flag on the module generation suggests the intention for lazy loading, and --module app.module.ts ensures it's registered in the main app module.

Example 2: Routing and Component Interaction

Input:

• ProductsModule with ProductListComponent and ProductDetailComponent.
• ProductsRoutingModule with a route for /products/:id that maps to ProductDetailComponent.
• ProductListComponent contains a list of products (e.g., [{ id: 1, name: 'Laptop' }, { id: 2, name: 'Mouse' }]).
• Clicking on "Laptop" in ProductListComponent should trigger navigation to /products/1.

Code Snippets (Illustrative):

• products-routing.module.ts:

  const routes: Routes = [
    { path: '', component: ProductListComponent },
    { path: ':id', component: ProductDetailComponent }
  ];
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class ProductsRoutingModule { }
  

• product-list.component.ts (within ProductsModule):

  // ... imports ...
  import { Router } from '@angular/router';
  
  @Component({ ... })
  export class ProductListComponent implements OnInit {
    products = [{ id: 1, name: 'Laptop' }, { id: 2, name: 'Mouse' }];
  
    constructor(private router: Router) {}
  
    viewProduct(id: number) {
      this.router.navigate(['/products', id]);
    }
    // ...
  }
  

• product-detail.component.ts (within ProductsModule):

  // ... imports ...
  import { ActivatedRoute } from '@angular/router';
  
  @Component({ ... })
  export class ProductDetailComponent implements OnInit {
    productId: string | null = null;
  
    constructor(private route: ActivatedRoute) {}
  
    ngOnInit() {
      this.route.paramMap.subscribe(params => {
        this.productId = params.get('id');
      });
    }
    // ...
  }
  

Output (Conceptual):

• Navigating to /products shows the ProductListComponent with "Laptop" and "Mouse".
• Clicking "Laptop" navigates to /products/1.
• The ProductDetailComponent is displayed, and this.productId in ProductDetailComponent will be "1".

Explanation:

The ProductsRoutingModule defines the URL structure. The ProductListComponent uses the Router service to programmatically navigate to the detail view. The ProductDetailComponent uses ActivatedRoute to access route parameters like the product ID.

Constraints

• You must use Angular CLI for generating modules and components.
• The solution should be written entirely in TypeScript.
• Assume the base Angular project is set up with a basic AppModule and AppRoutingModule.
• For the purpose of this challenge, you do not need to implement actual data fetching or services. Mock data within components is acceptable.
• Focus on the structure, routing, and module integration.

Notes

• Consider the role of NgModule metadata like declarations, imports, exports, and providers.
• Think about how the parent module (e.g., AppModule) will consume the feature module.
• Lazy loading is a key performance optimization in Angular; aim to implement it if possible.
• Ensure your ProductsModule is correctly imported into AppModule if not using lazy loading, or that AppRoutingModule correctly points to the lazy-loaded module.
• The provided examples are conceptual. Your actual code will involve creating and modifying specific files as outlined by the Angular CLI.