Angular - use component from another module

Question

i have a component contractDetails in contract module, i want to use this component in another module

i tried to export the contractDetails component but i get this error

If 'contract-details' is an Angular component, then verify that it is part of this module.

contract.module.ts

 @NgModule({
        imports: [
            CommonModule,
            ContractRoutingModule
        ],
        exports: [
            ContractDetailsComponent
        ],
        declarations: [
            ContractDetailsComponent
        ]
    })
    export class ContractModule { }

contract-details.component.ts

@Component({
        selector: 'contract-details',
        templateUrl: './contract-details.component.html'
    })
    export class ContractDetailsComponent {

    }

organization.module.ts

@NgModule({
    imports: [
        CommonModule,
        OrganizationRoutingModule
    ],
    declarations: [
        OrganizationDetailsComponent
    ]
})
export class OrganizationModule { }

organization-details.component.ts

@Component({
    templateUrl: './organization-details.component.html',
    styleUrls: ['./organization-details.component.scss']
})
export class OrganizationDetailsComponent {
}

organization-details.component.html

<contract-details></contract-details>

Possible duplicate of [Angular 2 Use component from another module](https://stackoverflow.com/questions/39601784/angular-2-use-component-from-another-module) — Igor, Jan 10 '19 at 14:25
@Igor this is not a duplicate. The question you linked has a different use case where he wants to use a component from a sub module while in this question, he wants to use a component from a sibling module. — Alex Coroza, Feb 18 '21 at 01:32

score 3 · Accepted Answer · answered Jan 10 '19 at 14:23

3

The OrganizationModule needs to import the ContractModule to be able to use the ContractDetailsComponent. The OrganizationModule definition should be:

@NgModule({
  imports: [
    CommonModule,
    OrganizationRoutingModule,
    ContractModule,
  ],
  declarations: [
    OrganizationDetailsComponent
  ]
})
export class OrganizationModule { }

answered Jan 10 '19 at 14:23

Teddy Sterne

13,774
2
46
51

If for some reason he needs to import `OrganizationModule` into `ContractModule` then there will be circular dependency – Alex Coroza Feb 18 '21 at 01:37

Angular - use component from another module

1 Answers1