title: Share a component between two different modules
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/OY0ZS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OY0ZS.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/ilqWB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ilqWB.png" alt="enter image description here"></a></p>
  
  <p>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</p>
  
  <p></p>
  
  <p>student-rating.component.html and student-rating.component.ts</p>
  
  <pre><code>&lt;div class="stu_profile_ratings"&gt;
            &lt;h3&gt;Average Ratings&lt;/h3&gt;
              &lt;!-- &lt;rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true"&gt;
                &lt;/rating&gt; --&gt;
                &lt;a (click)="showHideDrop();"&gt; &lt;img src ="../../../assets/images/drop-down-arrow-white.png" /&gt;&lt;/a&gt; 
                &lt;div *ngIf="showRatings" class="ratings_dropdown "&gt;
                  &lt;h4&gt;Ratings given by verified employers&lt;/h4&gt;
                    &lt;ul class="marginT10"&gt;
                      &lt;li&gt;
                        &lt;h5&gt;Performance&lt;/h5&gt;
                       &lt;!--  &lt;rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true"&gt;&lt;/rating&gt; --&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;h5&gt;Work Quality&lt;/h5&gt;
                 &lt;!--        &lt;rating [(ngModel)]="work_quality" [disabled]="false"  [readonly]="true" [required]="true"&gt;&lt;/rating&gt; --&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;h5&gt;Professionalism&lt;/h5&gt;
                     &lt;!--    &lt;rating [(ngModel)]="professionalism" [disabled]="false"  [readonly]="true" [required]="true"&gt;&lt;/rating&gt; --&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>landing.module.ts ---> 
  It does not contain any of component regarding student-rating.component.ts.
  <a href="https://i.stack.imgur.com/DwP0F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DwP0F.png" alt="enter image description here"></a></p>
  
  <p>These are the declarations of app.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>declarations: [AppComponent, StudentRatingsComponent,Page404Component, CapitalizePipe],</code></pre>
  </div>
  </div>
  </p>