Sharing module globally in the Angular

Question

Sharing module globally in the Angular

Navigation

#1 by (1 votes)

0

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

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

npm install --save @ angular / animations

And as the documentation itself explains, I imported the modules of the angular material 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 correctly, I inserted some components on the initial screen app.component.html, so it worked correctly.

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

Beingthuswithinthecomponent-curriculo.component.htmlcomponent,Iwenttousethecomponentsoftheangular-material,howeverpresentedanerror,statingthattheangular-materialelementswerenotfound:

For test purposes, I imported the module I had created with the angular-material components (AngularMaterialModule) directly into the component module (CadastroCurriculoModule), it worked there ...

I would like to know if it is possible for me to import the module (AngularMaterialModule) that I created with the angular-material components, in a global way, and become available for all modules and components of the project.

angular

asked by anonymous 25.07.2018 / 13:45

1 answer

How to redraw a Datatable if a checkbox is checked? Problem in checking with IF in C

score 1 · Accepted Answer

No, it does not. This is the correct way even of the angular work the modularization. If you need the global components, you must always import the module.

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

So it's easier to import just one module (the shared one) into each new one you create, than importing 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 it looks at everything that is global to the application. From other modules to components and directives.