Hierarchical Angular Modules and PrimeNG Components Errors

[PhilHuhn]

I am trying to better organize my Angular application using modules. This is how I understand what Angular is expecting. For example, I have a global folder containing a global.module.ts file. So as one adds components by CLI, the CLI will automatically add the component to the global.module.ts file. All of my applicaion folders are setup the same way. My next step is to change the folder module and export the component. Then in app.module.ts file, import the folder module.
This all works OK for my components, but when I add PrimeNG components I get the following error:

error NG8001: 'p-table' is not a known element:

I have created a little example of the problem. The following is an example component that contains a PrimeNG p-button component:

Code: Select all

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
  <p>example works!</p>
  <p-button label="Click" ></p-button>
  `
})
export class ExampleComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

The example component is in an issues folder with an issues.module.ts file as follows:

Code: Select all

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example/example.component';
//
@NgModule({
  declarations: [ExampleComponent],
  exports: [ExampleComponent],
  imports: [
    CommonModule
  ]
})
export class IssuesModule { }

This will result in a compile-time error of the type mentioned above. If one removes the p-button PrimeNG component, then the code works, or if one remove the declaration from issues.module.ts and moves the declaration to the app.module.ts, then the code works.

How do I get the above code design to work?