Para experimentar com segurança com módulos, deve-se criar uma cópia do projeto existente. Essas alterações são apenas para prática e não afetarão o projeto original. Nos capítulos seguintes, o foco retornará para a construção de aplicações utilizando componentes autônomos.

Criação de um Módulo para o TaskComponent

Esta etapa envolve a criação de um módulo para o TaskComponent. O módulo irá declarar o componente, uma diretiva relacionada e um pipe.

Para gerar um módulo no Angular, existe um comando específico na CLI:

Agora que o arquivo task.module.ts foi criado dentro da pasta task, podemos implementá-lo

Este módulo declara o TaskComponent, sua diretiva associada e um pipe personalizado. Ele importa o CommonModule para habilitar diretivas estruturais como *ngIf e *ngFor. O TaskComponent é exportado para que possa ser reutilizado em outros módulos.

Criando um Módulo para o TaskListComponent

Nesta etapa, será criado um módulo para o TaskListComponent. Crie um novo módulo na pasta task-list:

Agora que o arquivo task-list.module.ts foi criado dentro da pasta task-list, podemos implementá-lo

Este módulo declara o TaskListComponent, responsável por exibir uma lista de tarefas. Ele importa o TaskModule para acessar o componente de tarefa e o FormsModule para recursos como formulários de criação de tarefas. O componente é exportado para que possa ser utilizado em outros módulos.

Criação do Módulo Raiz

Nesta etapa, será definido o módulo principal que atua como ponto de partida de toda a aplicação.

Toda aplicação Angular precisa de um módulo raiz que informa ao Angular como iniciar o aplicativo. Este módulo reúne todas as partes necessárias: recursos internos do Angular, nossos módulos personalizados e o componente raiz.

Crie um novo módulo na pasta app:

A flag --flat instrui o Angular CLI a criar o arquivo do módulo sem gerar uma pasta separada.

Este módulo serve como ponto de entrada do aplicativo. Ele importa o BrowserModule, que é necessário para executar o Angular no navegador, e o TaskListModule, que contém a funcionalidade principal para gerenciar tarefas. O AppComponent é definido como o componente raiz para inicializar a aplicação.

Configurando o Ponto de Entrada

Esta etapa atualiza o ponto de entrada do aplicativo para iniciar usando o módulo raiz em vez de um componente independente.

Abra o main.ts e substitua seu conteúdo pelo seguinte:

Este código inicializa o aplicativo usando o AppModule. Esta configuração ilustra a arquitetura modular: a aplicação é dividida em módulos, cada um encapsulando seus componentes, diretivas, pipes, serviços e outros elementos.

A arquitetura modular no Angular auxilia na organização da aplicação em blocos lógicos, tornando o código escalável, bem estruturado e reutilizável.