Using component from another module (Angular)

Question

I want to call one component from another module. The component calls other component which have its own module which also calling component from TemplateComponent, the one that will import the component.

Component To Be Called

templates: <app-sub [schema]="schema"></app-sub>

First Module

@NgModule({
declarations: [
    ComponentToBeCalled,

],
exports: [
    ComponentToBeCalled
  ]
})
export class FirstModule { }

Template Component

@NgModule({
  imports: [
   FirstModule
   ],
  providers: [],
  exports:[ FirstModule ] 
})
export class TemplateComponent{}

But it doesn't work. Any workaround?

You have to import ``FirstModule`` in the module that ``TemplateComponent`` is defined. — CruelEngine, Dec 04 '19 at 04:12

Joel Joseph · Accepted Answer · 2019-12-04T05:37:16.473

4

To use a component in another module these are the steps involvded:

Step 1: First export the component from the module where the component belongs to so that it can be imported in other modules

first.module.ts

@NgModule({
declarations: [
    ComponentToBeCalled,

],
exports: [
    ComponentToBeCalled
  ]
})
export class FirstModule { }

Step 2 : You need to import the FirstModule in the module where the component has to be used ( In your case the module which contain TemplateComponent)

@NgModule({
declarations: [
    TemplateComponent,

],
imports: [
    FirstModule
  ]
})
export class SecondModule { }

Note : IF you have components that has to be shared between multiple modules create a shared module where these the components are defined and exported.

shared.module.ts

@NgModule({
declarations: [
    AlertComponent,
],
providers:[
   AlertService // services
],
exports: [
    AlertComponent // export the components you want
  ]
})
export class SharedModule { }

And you have to do is import these module into the all other modules you want to use shared component

edited Dec 04 '19 at 05:37

answered Dec 04 '19 at 04:20

Joel Joseph

5,889
4
31
36

2

importing the module is only required, no need to import the components. – Anand Bhushan Dec 04 '19 at 05:19
@AnandBhushan Sorry i meant export, fixed it. thanks for correcting me :) – Joel Joseph Dec 04 '19 at 05:22
SecondModule should import FirstModule, not ComponentToBeCalled – Diego Victor de Jesus Dec 04 '19 at 05:24
I'm going to call the component in the Shared Module, but it would say that it is circular dependency. – myelxx Dec 04 '19 at 08:05
@myelxx declare and export the component that needs to be used in a shared module, and just import the shared module in the other modules. In this way you can use all the components of the shared module in other modules. – Anand Bhushan Dec 04 '19 at 09:28

Using component from another module (Angular)

1 Answers1

Linked