Interação entre módulos em Angular

Em artigos anteriores, exploramos a interação entre um componente autônomo e outro. No entanto, quando aplicamos não apenas componentes autônomos, mas uma abordagem modular, como descrito no tema sobre Módulos, surge a questão de como ocorre a interação entre diferentes módulos. Em uma aplicação grande, é lógico dividir o sistema em módulos que executam diferentes tarefas. No entanto, pode ser necessário conectar e utilizar um módulo dentro de outro.

Por exemplo, vamos definir um projeto com a seguinte estrutura:

helloapp/
├── src/
│   ├── app/
│   │   ├── data/
│   │   │   ├── data.component.ts
│   │   │   ├── data.module.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   ├── main.ts
│   ├── index.html
├── angular.json
├── package-lock.json
├── package.json
└── tsconfig.json

Na pasta src/app/data, criaremos dois arquivos, data.module.ts e data.component.ts, que representarão a funcionalidade de um novo módulo.

No arquivo data.component.ts, definimos o componente DataComponent:

import { Component } from "@angular/core";

@Component({
  selector: "data-comp",
  template: "<div><h3>{{message}}</h3></div>",
})
export class DataComponent {
  message: string = "DataModule";
}

Já no arquivo data.module.ts, definimos a classe do módulo DataModule:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { DataComponent } from "./data.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [DataComponent],
  exports: [DataComponent], // exporta o componente
})
export class DataModule {}

Neste módulo, podemos incluir outros módulos que serão usados no contexto deste módulo e em seus componentes e diretivas.

Na seção declarations, adicionamos o componente DataComponent, que será parte deste módulo. Para que esse componente possa ser utilizado em outros módulos, DataComponent também é adicionado na seção exports.

Agora, vamos utilizar a funcionalidade do DataModule no módulo principal AppModule, no arquivo app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { DataModule } from "./data/data.module";

@NgModule({
  imports: [BrowserModule, DataModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Os módulos que criamos são importados da mesma forma que os demais módulos, na seção imports.

Após isso, poderemos utilizar a funcionalidade do DataModule nos componentes pertencentes ao AppModule. Por exemplo, podemos usar o DataComponent dentro do componente AppComponent, no arquivo app.component.ts:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `<div>
    <h1>AppModule</h1>
    <data-comp></data-comp>
  </div>`,
})
export class AppComponent {}

No arquivo main.ts, carregamos o módulo AppModule:

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Resultado:

Interação entre módulos em Angular