I have one component that is used on every page of my application. How do I declare it so it can be used globally?

I have a component HeroLogoComponent which is used within the header element of every page on my app. It is declared in app.module as:

@NgModule({
  declarations: [
  MyApp,
  HeroLogoComponent,
], ...

From reading the angular.io documentation, I understand that this should allow the selector <hero-logo> to be used in every other PageComponent. However, when I add it to any other page, I get the error

Error: Uncaught (in promise): Error: Template parse errors: 'logo' is not a known element

When I change PageComponentModule to include schemas: [CUSTOM_ELEMENTS_SCHEMA] the application loads but the component only displays in the HTML as an empty

<hero-logo><hero-logo>

with none of the template elements inside. I'd rather declare/import this component once to be used across the app than in every single PageComponentModule. Is there a way to do this so it can be referenced globally?

Thanks!

EDIT:

So in app.module.ts, the bootstrap is IonicApp since it is an ionic generated project.

bootstrap: [IonicApp],

Are components declared in the bootstrap globally available? And if so, how would I declare it from IonicApp?