Share a component between two different modules

Question

there are two modules in my application.one is employer and second is landing.I have created a component in landing module and i want to share this component with employer module. For that i have declared this component in app.module.ts in parent module and use them in child modules.

If i use this in single module it's already working but when i share it within different modules then it's showing me error

student-rating.component.html and student-rating.component.ts

<div class="stu_profile_ratings">
          <h3>Average Ratings</h3>
            <!-- <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true">
              </rating> -->
              <a (click)="showHideDrop();"> <img src ="../../../assets/images/drop-down-arrow-white.png" /></a> 
              <div *ngIf="showRatings" class="ratings_dropdown ">
                <h4>Ratings given by verified employers</h4>
                  <ul class="marginT10">
                    <li>
                      <h5>Performance</h5>
                     <!--  <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Work Quality</h5>
               <!--        <rating [(ngModel)]="work_quality" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Professionalism</h5>
                   <!--    <rating [(ngModel)]="professionalism" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                  </ul>
              </div>

import { Component, OnInit ,Input, ChangeDetectorRef} from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-student-ratings',
  templateUrl: './student-ratings.component.html',  
styleUrls: ['./student-ratings.component.css']
})
export class StudentRatingsComponent implements OnInit {
  showRatings : boolean = false;
  @Input() performance:string;
  @Input() work_quality:string;  
@Input() professionalism:string;
constructor() {  }
  ngOnInit() {  }
  showHideDrop(){
this.showRatings = !this.showRatings;
  }
}

landing.module.ts ---> It does not contain any of component regarding student-rating.component.ts.

These are the declarations of app.module.ts

declarations: [AppComponent, StudentRatingsComponent,Page404Component, CapitalizePipe],

you have multiple ways to solve this: 1,) Create a "common" module which shares the component and are included in your app-module, 2.) you can register this component as entry-component. — enno.void, Dec 20 '18 at 07:08
Can you update your question by pasting landing.module.ts content?? — Rathnakara S, Dec 20 '18 at 07:11
@mr.void i have done that check the question again app.module is the parent and i have created that component in the parent level and declare this component in app.module.ts — Puneet Sharma, Dec 20 '18 at 07:16

score 6 · Answer 1 · answered Dec 20 '18 at 07:11

A component can be declared in only one module if you need to use it in another module export it from the module where you declared it, and import that module in the module where you want to use it,

e.g you have a component by name AComponent, you have three modules, (module1, module2, and appModule).

@NgModule({
declarations: [AComponent],
exports: [AComponent]
});
export class module1;

Now if you need to use this component in module2, you don't declare that component in module2, you import module1 in module2,

@NgModule({
imports: [module1]
})
export class module2;

for more see official docs https://angular.io/guide/sharing-ngmodules

score 1 · Answer 2 · answered Dec 20 '18 at 07:10

1

For first screen shot issue read this.

Remove StudentRatingsComponent from app.module.ts file. It will fixed second screen shot issue.

answered Dec 20 '18 at 07:10

Sachin Shah

4,503
3
23
50

then where should i declare StudentRatingsComponent If i want to use it in both the modules company and landing – Puneet Sharma Dec 20 '18 at 07:18
@PuneetSharma The thing is you can not import same component in more then one module. – Sachin Shah Dec 20 '18 at 07:25

score 1 · Answer 3 · answered Dec 20 '18 at 07:21

Add exports property in your landing module and export the component you want to share with other modules. And in your app module just import your landing module.

Consider below class is your LandingModule

@NgModule({

declarations:[StudentsRatingComponent],
exports:[StudentsRatingComponent]
})
export class LandingModule{}

And Just import the LandingModule in your App module

@NgModule({
...
imports:[LandungModule],
...
})
export class AppModule{}

Share a component between two different modules

3 Answers3