Interação entre módulos - 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: