To safely experiment with modules, a copy of the existing project should be created. These changes are for practice only and will not affect the original project. In later chapters, the focus will return to building applications using standalone components.

Creating a Module for the TaskComponent

This step involves creating a module for the TaskComponent. The module will declare the component, a related directive, and a pipe.

To generate a module in Angular, there's a dedicated CLI command:

Now that the file task.module.ts has been created inside the task folder, we can implement it

This module declares the TaskComponent, its associated directive, and a custom pipe. It imports CommonModule to enable structural directives like *ngIf and *ngFor. The TaskComponent is exported so it can be reused in other modules.

Creating a Module for the TaskListComponent

In this step, a module will be created for the TaskListComponent. Create a new module in the task-list folder:

Now that the file task-list.module.ts has been created inside the task-list folder, we can implement it

This module declares TaskListComponent, responsible for rendering a list of tasks. It imports TaskModule to access the task component and FormsModule for features like task creation forms. The component is exported so it can be used in other modules.

Creating the Root Module

In this step, we will define the main module that acts as the starting point of the entire application.

Every Angular application needs a root module that tells Angular how to launch the app. This module brings together all the necessary pieces: built-in Angular features, our custom modules, and the root component.

Create a new module in the app folder:

The --flat flag tells Angular CLI to create the module file without generating a separate folder.

This module serves as the entry point of the app. It imports BrowserModule, which is necessary for running Angular in the browser, and the TaskListModule, which contains the main functionality for managing tasks. The AppComponent is set as the root component to bootstrap the application.

Configuring the Entry Point

This step updates the app's entry point to launch using the root module instead of a standalone component.

Open main.ts and replace its content with the following:

This code boots the app using AppModule. This setup illustrates the modular architecture: the application is split into modules, each encapsulating its components, directives, pipes, services, and more.

Modular architecture in Angular helps organize the application into logical blocks, making the code scalable, well-structured, and reusable.