CODEWITHSUNDEEP
angulartypescript
StephenRios
StephenRios

Reputation: 2232

Making Components Available to Nested Modules

So right now I have a set up that looks like this:

A Component does NOT have access to components loaded in A Large Module, even though those components are defined as both declarations and exports of A Large Module.

Is there any way that I can give the nested module Another Large Module access to the component imports of A Large Module so that it's child components will have access to those components? Or do these need to be declared inside Another Large Module in order for it's child components to have access to them?

Upvotes: 2

Views: 2162

Answers (2)

Sasxa
Sasxa

Reputation: 41254

You need to import things in the module if the components declared in it use those things. You can create a feature module that imports/exports/declares set of components and use it in your other modules.

- App Module
   - FeatureA Module
   - FeatureB Module
   - Large Module (import FeatureA Module)
       - Component [can use components from FeatureA; 
                    can't use components from FeatureB]
       - Another Large Module (import FeatureA Module, FeatureB Module)
           - Component [can use components from FeatureA and FeatureB]

If your Large Module and Another Large Module are lazy loaded, you will have FeatureA module in both files/packages, but few extra kilobytes won't hurt. One extra benefit is reusability, you can use feature modules in other projects:

- Different App Module
   - FeatureA Module
   - FeatureB Module
   - Different Large Module (import FeatureA Module)
       - Component [can use components from FeatureA; 
                    can't use components from FeatureB]

Upvotes: 2

maxime1992
maxime1992

Reputation: 23793

If you want to share components between modules, the easiest way is to create a shared.module.ts :

const SHARED_COMPONENTS = [];

const SHARED_MODULES = [];

@NgModule({
  declarations: [
    ...SHARED_COMPONENTS
  ],
  imports: [
    ...SHARED_MODULES
  ],
  exports: [
    ...SHARED_COMPONENTS,
    ...SHARED_MODULES
  ]
})
export class SharedModule { }

notice the 'exports' key it allows you to import your SharedModule wherever you need it in your hierarchy and use the shared components from everywhere.

Upvotes: 0

Related Questions