CODEWITHSUNDEEP
angularangular-componentsangular-module
xzegga
xzegga

Reputation: 3139

Using component from imported module inside of child modules

I have a module that export a component to expose it to other modules, I want to use this component in modules that are children of another module, I am importing the first module in the parent module to enable use inside of child modules but, I am not completely convinced that is the best way to do it.

This is my shared module in root folder with the component that I want to use:

app/shared/shared.module.ts

import {dtComponent} from './dt.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    dtComponent
  ],
  declarations: [
    dtComponent
  ]
})
export class DatePModule{ }

I have another module in app folder that import DatePModule like this:

app/contacts/contacts.module.ts

import {DatePModule} from '../shared/shared.module.ts';

@NgModule({
  imports: [
    CommonModule,
    DatePModule
  ]
})
export class CTModule{ }

I need to use dtComponent directly in some components of CTModule, but also need this component in other component that is in child modules of CTModule.

I can do it importing again DatePModule inside of child modules of CTModule but I am not convinced that is the best approach.

app/contacts/other/other.module.ts

import {DatePModule} from '../../shared/shared.module.ts';

@NgModule({
  imports: [
    CommonModule,
    DatePModule
  ]
})
export class OtherModule{ }

My question is, why I need to import again DatePModule if is already imported in parent module? If I delete this import in OtherModule the component dtComponent is not recognized as a part of the module.

Upvotes: 4

Views: 8464

Answers (1)

Max Koretskyi
Max Koretskyi

Reputation: 105439

why I need to import again DatePModule if is already imported in parent module

There's no hierarchy between modules that you import into one another. All modules are merged into one module definition factory with all components. If you use lazy-loading, still the same applies. The lazy-loaded module and shared module will be merged and there will be no hierarchy between them.

To learn more, read Avoiding common confusions with modules in Angular. Here is the quote:

The biggest confusion regarding imports in modules is that developers think it makes a hierarchy. And it’s probably reasonable to assume that a module that imports other modules becomes the parent module for its imports. However, that’s not what happens. All modules are merged during compilation phase. And thus non-lazy loaded modules do not create any hierarchy.

However, module imports/exports can enforce declarable types encapsulation during compilation. If you want to use declarable types from another module, you have to explicitly import this module or other module that re-exports the required module. The compiler controls encapsulation when parsing templates and the explicit imports provide the context to know that certain components can be used as children in the template.

I can do it importing again DatePModule inside of child modules of CTModule but I am not convinced that is the best approach.

That is correct approach if you want to use declarable types from DatePModule inside OtherModule.

Upvotes: 6

Related Questions