More than one component matched on this element

I'm trying to use prime-ng's p-dialog with a p-footer but I keep getting error:

More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: Footer,Footer ("g header="Terminate" icon="pi pi-exclamation-triangle" [(visible)]="termBoolean">
    [ERROR ->]<p-footer></p-footer>
  </p-dialog>
</div>

html:

<p-dialog header="Terminate" icon="pi pi-exclamation-triangle" [(visible)]="termBoolean">
    <p-footer></p-footer>
  </p-dialog>

I believe it has to be something with my imports/exports. I have an application thisApp.module.ts where I have some imports. I then import that module to my app.module.ts.

My application's thisApp.module.ts:

import {
  ConfirmDialogModule, DialogModule
} from "primeng/primeng";

export const myImports = [
  ConfirmDialogModule
  DialogModule
];

@NgModule({
  declarations: [ComponentOne],
  imports: [
    myImports
  ],
  providers: []
})
export class MyModule { }

my app.module.ts:

import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { DialogModule } from 'primeng/dialog';

@NgModule({
    imports: [
      MyModule,
      ConfirmDialogModule,
      DialogModule
    ],
    declarations: [
      AppComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }