Angular Shared Modules

I have researched but still don't know what I'm doing wrong.

I have two modules:

• SharedModule
• MainModule

SharedModule contains two Components I care about (for the purpose of this question):

• components\HeaderComponent (selector: 'my-header')
• components\FooterComponent (selector: 'my-footer')

Main Module contains one component I care about:

• components\MyHome (selector: 'my-home')

Here's my shared-module.ts:

@NgModule({
  declarations: [
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    HeaderComponent,
    FooterComponent,
  ],

})
export class SharedModule { }

And here's my main.component.ts:

@NgModule({
  declarations: [
    MyHomeComponent,
  ],
  imports: [
    CommonModule,
    SharedModule
  ]
})
export class MainModule { }

The application DOES have an app-routing.module.ts file but it is not configured.

The error message is as follows:

Error: src/app/main/components/my-home/my-home.component.html:1:1 - error NG8001: 'my-header' is not a known element:
1. If 'my-header' is an Angular component, then verify that it is part of this module.
2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <my-header></my-header>

Did I just make a stupid mistake somewhere?