Angular: Component from a shared module not being recognized

Question

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?

Answer 1

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

Answer 2

I asume that you are not importing the shared module into the web module. Most likely you added the import only into the app module

Answer 3

in shared module you have to export that component. suppose you have moduleone module which has component componentone you want to add moduleone in shared module moduleshared, which will be added into moduletwo. I have to export component in moduleshared that was the problem. I added my module moduleone in moduleshared but forgot to import, once I added then its available in other component of moduletwo