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 — Igor
– Igor, Commented Jan 10, 2019 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
– Alex Coroza, Commented Feb 18, 2021 at 1:32

Teddy Sterne · Accepted Answer · 2019-01-10 14:23:18Z

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, 2019 at 14:23

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Coroza Over a year ago

If for some reason he needs to import OrganizationModule into ContractModule then there will be circular dependency

Collectives™ on Stack Overflow

Angular - use component from another module

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related