Even though I import and export the correct modules and components, the Angular compiler throws an error when I try to use a custom component from a custom module, inside a custom component inside a different module.
button.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//the button has selector: j-button
import { ButtonComponent } from './button.component';
@NgModule({
declarations: [ButtonComponent],
imports: [CommonModule],
exports: [ButtonComponent],
})
export class ButtonModule {}
When I try to use the button in the main app, it works fine:
app.component.html
<j-button>HELLO</j-button>
But I have a different module:
color-picker.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ColorPickerComponent } from './color-picker.component';
import { ButtonModule } from '../button/button.module';
@NgModule({
declarations: [ColorPickerComponent],
imports: [CommonModule, ButtonModule],
exports: [ColorPickerComponent],
})
export class ColorPickerModule {}
in the template I try to use the component but I get an error
color-picker-component.html
<j-button>HELLO</j-button>
with error
src/app/color-picker/color-picker.component.html:8:9 - error NG8001: 'j-button' is not a known element:
1. If 'j-button' is an Angular component, then verify that it is part of this module.
How do I fix this?