Sharing module globally at Angular

Question

I created a project used the Angular-Cli tool and together installed

npm install --save @angular/material @angular/cdk

npm install --save @angular/animations

And as in the documentation itself explains I imported the modules of the material angular into a separate file: (angular-material-module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform- 
browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatCardModule, MatIconModule, MatToolbarModule, MatButtonModule, 
MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
   imports: [
       CommonModule,

       BrowserAnimationsModule,
       FlexLayoutModule,
       MatCardModule,
       MatIconModule,
       MatToolbarModule,
       MatButtonModule,
       MatFormFieldModule,
       MatInputModule
   ],    
   exports: [
       BrowserAnimationsModule,
       FlexLayoutModule,
       MatCardModule,
       MatIconModule,
       MatToolbarModule,
       MatButtonModule,
       MatFormFieldModule,
       MatInputModule
   ]
})
export class AngularMaterialModule { }

Then I imported the module into my main module (app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularMaterialModule } from './compartilhado/angular- 
   material/angular-material.module';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { MainModule } from './main/main.module';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,

        AppRoutingModule,
        AngularMaterialModule,


        MainModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

To test if everything was working properly, I inserted some components into the app.component.html home screen, so it worked correctly.

But I created some sub modules of the main module, as shown in the image below:

Being so within the Registry-Curriculum.component.html, I went to use the angular-material Components, but presented an error, stating that the elements of the angular-material were not found:

For test purposes, I imported the module that I had created with the angular-material (Angularmaterialmodule) Components, directly into the component module (Cadastroculomodule), and it worked there ...

I wonder if it is possible that I import the module (Angularmaterialmodule) that I created with the components of the angular-material, in a global way and is available for all modules and Components of the project.

Answer 1

No, you don’t have to. This is the right even form of the angular work modularization. If you need the global Components, you always have to import the module.

What we often do in Angular projects is to create a module Sharedmodule and in it focus and export everything global to the app, put there all the libs and modules that will be used globally. And with each new module you create, just import Sharedmodule.

Thus it is easier to import only one module ( the Shared) in each new you create, than to import several. an example of Sharedmodule would be:

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule
    ],
    declarations: [
        LayoutComponent,
        LayoutHeaderComponent,
        LayoutSideMenuComponent,
        LayoutFooterComponent,
        LayoutControlSidebarComponent,
        NoLinkDirective,
        CheckRoleDirective,
        CheckAccessDirective,
        LimpaDirective,
        LoadingComponent,
        ModalCallComponent,
        ModalConfirmComponent,
        ModalAlertComponent,
        PainelComponent,
        PrimaryButtonComponent,
        DangerButtonComponent,
        ModalSenhaComponent,
        PaginacaoComponent,
        MenuCom0Component,
        MenuRootComponent,
        MenuCom1Component,
        MenuCom2Component,
        MenuEnf1Component,
        MenuPsi1Component,
        MenuMed1Component,
        MenuAdm1Component,
        MenuMkt1Component,
        ClienteResponsivoComponent,
        MenuAdm2Component,
        BuscaTopoComponent,
        SnackbarUpdateComponent,
        ModalLogComponent,
        LogItemComponent,
        MenuCos0Component,
        CartaoComponent,
        MortosStatsComponent,
        ClienteLogComponent,
        DocumentosListComponent,
        DashboardAlertComponent,
        LembreteLigacaoComponent
    ],
    exports: [
        FormsModule,
        NoLinkDirective,
        CheckRoleDirective,
        CheckAccessDirective,
        LimpaDirective,
        LayoutComponent,
        LoadingComponent,
        ModalCallComponent,
        ModalConfirmComponent,
        ModalAlertComponent,
        PainelComponent,
        PrimaryButtonComponent,
        DangerButtonComponent,
        ModalSenhaComponent,
        PaginacaoComponent,
        ClienteResponsivoComponent,
        ModalLogComponent,
        CartaoComponent,
        MortosStatsComponent,
        ClienteLogComponent,
        DocumentosListComponent,
        LembreteLigacaoComponent
    ],
    providers: [
        MessageService,
        NotificationService,
        EventEmitterService,
        GenericService,
        HttpStatusService,
        NoLinkDirective,
        CheckRoleDirective,

        // services
        UsersService,
        UtilService,
        ClienteService,
        EmailService
    ]
})
export class SharedModule {}

Note that it is extensive, but includes everything that is global to the application. From other modules to Components and Directives.