CODEWITHSUNDEEP
angular
Aymen Kanzari
Aymen Kanzari

Reputation: 2013

Angular - use component from another module

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>

Upvotes: 3

Views: 9831

Answers (1)

Teddy Sterne
Teddy Sterne

Reputation: 14201

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 { }

Upvotes: 3

Related Questions