Error No component factory found for ... in Ionic 4

I have a ModalComponent

if I declare it like so in my app.module.ts It works fine and I can use it in my app.

@NgModule({
  declarations: [AppComponent, ModalComponent],
  entryComponents: [ModalComponent],
  ...
})

Now If I do the same in a my page page.module.ts and try to use the modal there it doesn't work. Why?

I get this error No component factory found for ... yadaayaydayada

I've read this could be outdated scripts issue because of ionic 4, so I made sure my package.json base is identical to their templates.

My ideal solution would be to display the modal from a component within a page, but I can't get it to work due to the above error.

How do I need to register my component so I can bind it programmatically within a page and/or inside a component nested in that page?

More Information Below

This is how I display my modal:

async presentModal() {
  const modal = await this.ui.modalController.create({
    component: ModalComponent,
  });

  return await modal.present();
}

• My nested component & modal component don't have @NgModule's

Complete app.module.ts

//Omitting Imports

@NgModule({
  declarations: [AppComponent, ModalComponent],
  entryComponents: [ModalComponent],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    HttpClientModule,
    OAuthModule.forRoot(),
    IonicModule.forRoot(),
    AppRoutingModule, // <-- This is where the Page is imported
  ],
  providers: [
    OAuthService,
    UrlHelperService,
    InAppBrowser,
    StatusBar,
    SplashScreen,
    Camera,
    WebView,
    File,
    FileTransfer,
    VideoEditor,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: UnAuthorizedService, multi: true, }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './battles/tabs/tabs.module#TabsPageModule' }, <-- page registered here
   //omitting other routes
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Here is my tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'battles',
    component: TabsPage,
    children: [
      {
        path: 'user',
        children: [
          {
            path: '',
            loadChildren: '../user/user.module#UserPageModule' <-- Here is my page (I think this might be lazy loaded not sure.)
          }
        ]
      }
      //Omitting other routes
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }

Here is the page.module

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { UserPage } from './user.page';

const routes: Routes = [
  {
    path: '',
    component: UserPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UserPage],
  // I would declare my modal like this same as in the app.module, 
  // but this isn't working, for now I'm storing it in app.module
  //    declarations: [UserPage, ModalComponent],
  //    entryComponents: [ModalComponent],

})
export class UserPageModule { }

Full Error:

ERROR Error: Uncaught (in promise): Error: No component factory found for ModalComponent. Did you add it to @NgModule.entryComponents?

I think because my page is lazy loaded I am facing this issue which my lack of Angular knowledge stops me from understanding how to solve it.