title: Angular 6 Using Two Shared Module : Component is not a known element:
body: <p>I have two shared Moduled 'shared-candidate-login-reg.module.ts' and 'shared.module.ts', I am importing both the shared modules in my home page.  I want to use 'AlertLblComponent' from my 'shared.module.ts' in side my 'WidgetLogRegComponent' component (which is a child component of my home page and also is a part of my 'shared-candidate-login-reg.module'). I am also using Lazy loading. Why can't I get the 'alert-lbl' component in my Home Module?</p>
  
  <p>My alert.module.ts</p>
  
  <pre><code>import { AlertLblComponent } from './../directives';
  import { AlertService } from './../services/alert.service';
  @NgModule({
      declarations: [
          AlertLblComponent
      ],
      imports: [
          CommonModule,
      ],
      providers: [
          AlertService,
      ],
      exports: [
          CommonModule,
          AlertLblComponent
      ]    
    })
    export class SharedModule {} 
  </code></pre>
  
  <p>shared-candidate-login-reg.module.ts</p>
  
  <pre><code>import { WidgetLogRegComponent } from './../candidates/widget-log-reg/widget-log-reg.component';
  @NgModule({
    imports: [
      CommonModule,
    ],
    declarations: [
      WidgetLogRegComponent
    ],
    exports: [
      WidgetLogRegComponent 
   ]
  })
  export class ShareCandidateLoginRegdModule { }
  </code></pre>
  
  <p>home.module.ts</p>
  
  <pre><code>import {ShareCandidateLoginRegdModule} from './../shared/shared-candidate-login-reg.module';
  import {SharedModule} from './../shared/shared.module';
  
  @NgModule({
    declarations: [
      HomeComponent
        ], 
    providers: [CandidateService,JobService],
    imports: [
      CommonModule,
      SharedModule,
      ShareCandidateLoginRegdModule,
      HomeRoutingModule,
    ],
    exports: [HomeComponent],
  
  })
  export class HomeModule { }
  </code></pre>
  
  <p>home.component.html</p>
  
  <pre><code>&lt;div class="col-md-4 banner-form"&gt;
    &lt;app-widget-log-reg&gt;&lt;/app-widget-log-reg&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>widget-log-reg.component.html</p>
  
  <pre><code>&lt;alert-lbl&gt;&lt;/alert-lbl&gt;
  &lt;div class="page-tab"&gt;
     &lt;div id="form-login"&gt;
      ......
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>alert-lbl.component.ts</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Subscription } from 'rxjs';
  import { AlertService } from './../services';
  
  @Component({
      selector: 'alert-lbl',
      templateUrl: 'alert-lbl.component.html'
  })
  export class AlertLblComponent implements OnInit, OnDestroy {
      private subscription: Subscription;
      message: any;
      constructor(private alertService: AlertService) { }
      ngOnInit() {
          this.subscription = this.alertService.getMessage().subscribe(message =&gt; { 
              this.message = message; 
          });
      }
      ngOnDestroy() {
          this.subscription.unsubscribe();
      }
  }
  </code></pre>
  
  <p>alert-lbl.component.html</p>
  
  <pre><code>&lt;div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }"&gt;{{message.text}}&lt;/div&gt;
  </code></pre>
  
  <p>I am getting this error fallowing: </p>
  
  <pre><code>Uncaught (in promise): Error: Template parse errors:
  'alert-lbl' is not a known element:
  </code></pre>