Bringing in a component called "TemperatureComponent" into a module named "DashboardModule" and defining + exporting it there:
import { TemperatureComponent } from './temperature/temperature.component';
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
//...
@NgModule({
imports: [
//...
],
declarations: [
//...
TemperatureDraggerComponent,
TemperatureComponent,
],
exports: [
TemperatureComponent,
TemperatureDraggerComponent,
]
})
export class DashboardModule { }
Functioning correctly within that module. I'm attempting to utilize the same component in another module by using its selector, (the selector also functions properly in DashboardModule). I attempt to achieve this by importing DashboardModule:
import { ThemeModule } from '../../@theme/theme.module';
import { DashboardModule } from '../dashboard/dashboard.module';
@NgModule({
imports: [
//...
DashboardModule,
],
})
export class DiceModule { }
In the HTML of this second module, the selector is as follows:
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
<ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
<i [ngClass]="statusCard.iconClass"></i>
</ngx-status-card>
</div>
</div>
<div class="row">
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-temperature></ngx-temperature>
</div>
</div>
This results in the error:
ERROR in src/app/pages/dice/dice.component.html:11:5 - error NG8001: 'ngx-temperature' is not a known element:
- If 'ngx-temperature' is an Angular component, then verify that it is part of this module.
- If 'ngx-temperature' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Additional code provided upon request:
temperature.component.ts
// Code for TemperatureComponent here...
temperature.component.html
// HTML template code for TemperatureComponent here...
Summary: Attempting to share a component between Modules A & B by:
- Importing, declaring & exporting it in Module A.
- Importing Module A into Module B.
Questioning why the selector isn't functioning and instead showing an error?
P.S: Both modules are imported into a parent module named Pages. Unsure if this is best practice or if it is relevant in any way.