Implementing Lazy-Loaded Modules in Angular

Lazy loading modules in Angular is a crucial technique for optimizing application performance, especially for larger projects. It involves loading modules only when they are needed, rather than loading everything upfront. This challenge will guide you through implementing lazy loading for a feature module within an Angular application.

Problem Description

You are tasked with creating an Angular application with a core module and a separate "Products" feature module. The "Products" module should be lazy-loaded, meaning it's not loaded when the application initially boots up. Instead, it should be loaded only when the user navigates to a route that requires it (e.g., a "Products" page).

What needs to be achieved:

Create a new Angular application (if you don't have one already).
Create a "Products" feature module. This module should contain a simple component (ProductsComponent) that displays a message like "Products Feature Loaded!".
Configure the application's routing to lazy-load the "Products" module when the user navigates to the /products route.
Ensure the application's main module loads without the "Products" module.
Verify that navigating to /products loads the "Products" module and displays the message from ProductsComponent.

Key Requirements:

The application must be a functional Angular application.
The "Products" module must be correctly configured for lazy loading.
The routing must be set up to trigger the lazy loading of the "Products" module.
The ProductsComponent must display the expected message when the module is loaded.

Expected Behavior:

When the application starts, only the core module should be loaded.
Navigating to /products should trigger the loading of the "Products" module.
The ProductsComponent should be rendered and display "Products Feature Loaded!".
Navigating away from /products should not unload the "Products" module (Angular handles this automatically).

Edge Cases to Consider:

Ensure the lazy loading path is correctly configured in the routing module.
Verify that the "Products" module is not included in the root module's imports.
Test navigation between the root route and the /products route to confirm lazy loading behavior.

Examples

Example 1:

Input: Application starts, user navigates to '/' (root route)
Output: Application loads successfully, no error messages, no ProductsComponent displayed.
Explanation: The core module loads, but the Products module is not loaded yet.

Example 2:

Input: Application starts, user navigates to '/products'
Output: Application loads successfully, the ProductsComponent is displayed with the message "Products Feature Loaded!".
Explanation: The Products module is lazy-loaded and its component is rendered.

Example 3:

Input: Application starts, user navigates to '/products', then navigates back to '/'
Output: Application loads successfully, no error messages, the ProductsComponent is no longer displayed.
Explanation: Angular manages the lifecycle of the lazy-loaded module; it remains in memory after navigation away.

Constraints

The application must be built using Angular version 14 or higher.
The solution should be written in TypeScript.
The "Products" module should be a standalone module.
The routing configuration should be concise and easy to understand.
The solution should be testable (although writing unit tests is not explicitly required for this challenge).

Notes

Consider using the loadChildren property in your routing configuration to define the lazy loading path.
The lazy loading path should point to the "Products" module's entry point (e.g., products.module.ts).
Remember to update the app-routing.module.ts file to configure the lazy loading.
Focus on the core concept of lazy loading – ensuring the module is loaded only when needed. Don't overcomplicate the "Products" module itself; a simple component is sufficient.
Use Angular CLI to generate the modules and components to streamline the development process.