Angular 7 Pass Imported Module to Feature Module

Question

I have a hierarchy of feature modules in an Angular 7 app. It is structured as follows:

• app
  • admin (UI module imported here)
    • feature1
    • feature2
  • public

In the admin module, I have imported a UI framework module. My question is, if my modules are imported "upward", should that also mean that the components in feature1 module have access to the UI module, or do I need to import the UI module in each feature module? Do I have fundamental misunderstanding of "child" modules?

app.module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { AppRoutingModule } from './app-routing.module';
    import { AdminModule } from './modules/admin/admin.module';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        BrowserAnimationsModule  ,
        AdminModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

admin.module

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { AdminRoutingModule } from './admin-routing.module';
    import { UIFrameworkModule} from '@ui-framework/angular';
    
    import { Feature1Module} from './modules/feature1/feature1.module';
    import { Feature2Module} from './modules/feature2/feature2.module';
    
    @NgModule({
      imports: [
        CommonModule,
        Feature1Module,
        Feature2Module,
        AdminRoutingModule,
        UIFrameWorkModule
      ]
    })
    export class AdminModule {}

feature1.module

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { Feature1RoutingModule} from './feature1-routing.module';
    
    @NgModule({
      imports: [
        CommonModule,
        Feature1RoutingModule
      ]
    })
    export class Feature1Module {}

Answer 1

You can have as many modules - but the question is how to import a module to all the module in a single import array - there comes the main act of module separation

Create a new module as shared module this module doesn't hold any components or directives if it has any not an issue - this module should be the module that imports all your common module

In your case UIFrameWorkModule this is the common module that you want to access both in feature and admin module if that is the case create a shared module and import this module and export that shared module like the code below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UIFrameworkModule } from '@ui-framework/angular';

@NgModule({
  imports: [
    CommonModule,
    UIFrameworkModule 
  ],
  exports:[UIFrameworkModule]
})
export class SharedModule {}

Now this shared module holds the UIFrameworkModule and export the same module too - You have to just import this shared module where ever you want that will bring the UIFrameworkModule to the imported module

admin.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { UIFrameworkModule} from '@ui-framework/angular';

import { Feature1Module} from './modules/feature1/feature1.module';
import { Feature2Module} from './modules/feature2/feature2.module';

@NgModule({
  imports: [
    CommonModule,
    Feature1Module,
    Feature2Module,
    AdminRoutingModule,
    SharedModule 
  ]
})
export class AdminModule {}

feature.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Feature1RoutingModule} from './feature1-routing.module';

@NgModule({
  imports: [
    CommonModule,
    Feature1RoutingModule,
    SharedModule 
  ]
})
export class Feature1Module {}

I have just imported the shared module in both the modules like wise you can move all your common module to the shared modules - hope this helps - Thanks happy coding !!

Answer 2

If your childModules are within the featureModule, you do not need to import ChildModules separately, just export the components belongs to ChildModule and import featureModule within your top Module