Ionic 5 ion-modal does not show up

Ionic Framework
1

I created a new ionic5 project (angular with tabs).
Inside I am trying to open a modal exactly as per the documentation about ion-modal and get:

core.js:6014 ERROR Error: Uncaught (in promise): Error: No component factory found for ModalPage. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ModalPage. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (core.js:25607)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25683)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25680)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25680)

I did not find any mention in ionic5 breaking changes

I tried with the Modal declared or not in the module, same result.
I am using the default angular version in use when generating a new ionic5 with ionic start

tab2.page.ts

@Component({
  selector: "app-tab2",
  templateUrl: "tab2.page.html",
  styleUrls: ["tab2.page.scss"],
})
export class Tab2Page {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
    });
    return await modal.present();
  }
}

modal.page.ts

@Component({

selector: "modal-page",

})

export class ModalPage {

constructor() {}

}

PS: ionic info

Ionic:

   Ionic CLI                     : 6.6.0 (/Users/me/applications/node-v10.15.3-darwin-x64/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res : 0.12.1
   native-run  : 1.0.0

System:

   NodeJS : v10.15.3 (/Users/me/applications/node-v10.15.3-darwin-x64/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina
2

As it’s explain in the error message, you need to declare the modal in a .module.ts file.

So in your app.module.ts or the parent module you want, just add your modal in the declaration and entryComponent sections (both of them):

import { YourModal } from 'YourModalPath';

@NgModule({
  imports: [ ],
  declarations: [YourModal],
  entryComponents: [YourModal]
})
3

Thank you very much, I learnt something.

I did not do so with ionic 4 - maybe because angular version in use was different.
I was reading about the angular modules but did not even know about this, it is indeed quoted in API documentation.

4

Hi, i am googling for a while now and cannot find a good answer.
Can you tell me why it is necessary to add entrycomponents?

As of Angular 9.0.0 and Ivy improvements - Ionic Blog i thought this is not the case anymore.

I have a similar problem. I had a Angular App where the Popup worked fine.
I migrated to Ionic, everything worked fine for a while.

I don’t know exactly since when the problem occurs but i guess it is since i ran ionic repair.

Now i have to add my Components to Entrycomponents. (Wich should be deprecated?)

Nevermind, I work on windows and had a # in the directory path, which interestingly causes the app to work only partly.
I am pretty sure that i have worked on this path for a long time. I don’t know why it caused the problem now.
The only thing that comes into my mind is, that i pulled a checkin from a linux machine.