I have an app with 2 modules so far: "Shared" and "Web".
All my components in web are working fine. I just created a simple component in the Shared module since I plan to re-use it throughout the app:
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'pb-ds-pluginstable',
templateUrl: './pluginstable.component.html',
styleUrls: ['./pluginstable.component.scss']
})
export class PluginstableComponent implements OnInit {
@Input() name: string;
@Input() version: string;
@Input() link: string;
constructor() {}
ngOnInit() {}
}
This is imported into the shared module, and exported:
...other imports...
import { PluginstableComponent } from './pluginstable/pluginstable.component';
@NgModule({
imports: [
CommonModule,
RouterModule,
NgbModule
],
declarations: [HeaderComponent, FooterComponent, HeaderShadowDirective, PluginstableComponent],
exports: [HeaderComponent, FooterComponent, HeaderShadowDirective, PluginstableComponent]
})
export class SharedModule { }
But when I use this in a component's template in the Web module, like this:
<pb-ds-pluginstable name="foo" version="2.2.2" link="bar"></pb-ds-pluginstable>
I get an error that the component is not recognized:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'pb-ds-pluginstable' is not a known element:
1. If 'pb-ds-pluginstable' is an Angular component, then verify that it is part of this module.
2. If 'pb-ds-pluginstable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</section>
[ERROR ->]<pb-ds-pluginstable name="foo" version="2.2.2" link="bar"></pb-ds-pluginstable>
What am I missing here?
You need also to import the SharedModule
in that(not parent, not child, exact that module) module
, where you want to use it's exported elements
@NgModule({
imports: [
SharedModule,
...
]
})
export class YourModule { }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With