如何导入一次性全局模块，供多应用项目中其他模块组件识别？

Hey there! I get it—you want to avoid repeating imports of modules like FlexLayoutModule and CustomUIModule across every sub-app module in your Angular project. The good news is Angular's module system makes this straightforward with a shared module approach. Here's exactly how to set it up:

Step 1: Create a Shared/Global Module #

First, make a dedicated module (let's call it SharedModule) that will act as the single source of truth for your global modules. This module will import the modules you want to share, then export them so other modules can access their features.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import your global modules here
import { FlexLayoutModule } from '@angular/flex-layout';
import { CustomUIModule } from './path/to/your/custom-ui.module';

@NgModule({
  imports: [
    CommonModule,
    // Import the global modules once here
    FlexLayoutModule,
    CustomUIModule
  ],
  // Critical: Export these modules so other modules inherit their functionality
  exports: [
    FlexLayoutModule,
    CustomUIModule,
    CommonModule // Optional, but handy so sub-modules don't need to import this separately
  ]
})
export class SharedModule { }

Step 2: Update Your AppModule #

Now, replace the individual imports of your global modules in AppModule with the SharedModule. This keeps your root module clean and ensures the global modules are loaded once at the app level.

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    // Use SharedModule instead of importing FlexLayoutModule/CustomUIModule directly
    SharedModule,
    // Your sub-app modules (like AuthenticationModule)
    AuthenticationModule
  ]
})
export class AppModule { }

Step 3: Use SharedModule in Sub-App Modules #

In any sub-module (like AuthenticationModule), all you need to do is import the SharedModule—no more repeating imports of FlexLayoutModule or CustomUIModule. Now all components in the sub-module can use directives, components, or pipes from those global modules.

@NgModule({
  declarations: [
    // Your sub-app components (e.g., LoginComponent, RegisterComponent)
    LoginComponent,
    RegisterComponent
  ],
  imports: [
    // Just import SharedModule here, and you're good to go
    SharedModule
  ]
})
export class AuthenticationModule { }

Why This Works #

Angular modules use an export/import chain: when you export a module from SharedModule, any module that imports SharedModule gains access to all exported members of that module. This means you only ever import your global modules once (in SharedModule), and every other module can leverage them by importing SharedModule.

内容的提问来源于stack exchange，提问作者Shift 'n Tab