Why angular 2+ modules or components should be imported each time is required instead of once?

Question

I'm a newbie in Angular and learning, and I'm checking an angular app of my company. I noticed that in app.module they import some modules and in SharedModule, import another modules, components and services, here a snippet code of app.module:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { StoreModule } from "@ngrx/store";
import { MatDialogModule } from "@angular/material";
import { AppRoutingModule } from "./app-routing.module";
import { SharedModule } from "@shared/shared.module";

and here, a snippet code of SharedModule:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatInputModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatSelectModule,
  MatSnackBarModule,
  MatTooltipModule,
} from "@angular/material";
import { RouterModule } from "@angular/router";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { FlexLayoutModule } from "@angular/flex-layout";

import { MatNativeDateModule } from "@angular/material/core";

// Pipes
import { PhonePipe } from "../common/pipes/phone.pipe";
import { DatesFormatPipe } from "app/pipes/dates-format.pipe";

// Services
import { AuthService } from "./services/auth.service";
import { CustomerDataService } from "./services/customer-data.service";
import { TimeEntriesService } from "./services/time-entries.service";
import { ContactsService } from "./services/contacts.service";
import { CaregiversService } from "./services/caregivers.service";
import { ReportService } from "./services/report.service";
import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
import { ReportGuardService } from "./services/auth-guard.service";

// Components
import { LayoutMenuCardsComponent } from "./components/layout-menu-cards/layout-menu-cards.component";
import { TimeEntriesSupportComponent } from "./components/time-entries-support/time-entries-support.component";
import { SpinnerComponent } from "./components/spinner/spinner.component";
import { ContactsSupportComponent } from "./components/contacts-support/contacts-support.component";

@NgModule({
  declarations: [
    ParagraphComponent,
    FormButtonsComponent,
    FormListComponent,
    etc.
  ],
  imports: [
    MatRadioModule,
    MatNativeDateModule,
    FlexLayoutModule,
    CommonModule,
    etc.
  ],
  exports: [
    ParagraphComponent,
    FormButtonsComponent,
    FormListComponent,
    etc.
  ],
  entryComponents: [AddEditContactComponent, AddEditCaregiverComponent],
})
export class SharedModule {}

However, into the different components that are part of the app, I noticed that they import many of the previously imported modules and components, again.

Why must be done this way instead of just importing modules and components once in e.g. app.module or other module and just use them in any place is required?
Is it not supposed that when are exported by using exports property in a module, they are visible or public?
If this must be done this way caused by an Angular requirement, why they are not imported where requiered instead of app.module?

Thanks

Francesco Lisandro Francesco Lisandro · Accepted Answer · 2021-03-25T03:22:07

Modular architecture in Angular is the act of installing a particular separation of code from each other based on the scope and problem domains.

A problem domain is a definition of what you need in order to solve a particular issue. It is a scope for your work, a clear boundary line around what is relevant and what is not. It is the thing that gives us Point A and Point B — the software produced is the connecting line between these two points.

Read more: What Does Modular Architecture in Angular Even Mean?

Why angular 2+ modules or components should be imported each time is required instead of once?

1 Answers