Angular 6 Using Two Shared Module : Component is not a known element:

Question

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?

My alert.module.ts

import { AlertLblComponent } from './../directives';
import { AlertService } from './../services/alert.service';
@NgModule({
    declarations: [
        AlertLblComponent
    ],
    imports: [
        CommonModule,
    ],
    providers: [
        AlertService,
    ],
    exports: [
        CommonModule,
        AlertLblComponent
    ]    
  })
  export class SharedModule {}

shared-candidate-login-reg.module.ts

import { WidgetLogRegComponent } from './../candidates/widget-log-reg/widget-log-reg.component';
@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    WidgetLogRegComponent
  ],
  exports: [
    WidgetLogRegComponent 
 ]
})
export class ShareCandidateLoginRegdModule { }

home.module.ts

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

home.component.html

<div class="col-md-4 banner-form">
  <app-widget-log-reg></app-widget-log-reg>
 </div>

widget-log-reg.component.html

<alert-lbl></alert-lbl>
<div class="page-tab">
   <div id="form-login">
    ......
   </div>
</div>

alert-lbl.component.ts

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 => { 
            this.message = message; 
        });
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

alert-lbl.component.html

<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div>

I am getting this error fallowing:

Uncaught (in promise): Error: Template parse errors:
'alert-lbl' is not a known element:

Can you add your AlertLblComponent code? It looks like you put that in a directory called directives, which will behave differently. — user10747134
– user10747134, Commented Jan 19, 2019 at 19:46

Bunyamin Coskuner · Accepted Answer · 2019-01-19 19:55:24Z

5

You did not import SharedModule which exports alert-lbl component within ShareCandidateLoginRegdModule. Just import it as follows

@NgModule({
  imports: [
    CommonModule,
    SharedModule // <-- import shared module here
  ],
  declarations: [
    WidgetLogRegComponent
  ],
  exports: [
    WidgetLogRegComponent 
 ]
})
export class ShareCandidateLoginRegdModule { }

answered Jan 19, 2019 at 19:55

Bunyamin Coskuner

8,8892 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amit gupta Over a year ago

Great its woking, but why its not working when i imported separately ?

Bunyamin Coskuner Over a year ago

If you want to use a component from another module, you have to import it. Unfortunately, there is no global import for components/directives/pipes. Even though you import both of those module within home.module, ShareCandidateLoginRegdModule cannot use components from SharedModule without importing it.

Collectives™ on Stack Overflow

Angular 6 Using Two Shared Module : Component is not a known element:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related