Can anybody give me an example for modalCtrl.create(ModalClass) with common Component, rather than @IonicPage?

Ionic Framework ionic-v3
1

I have a specific modal component, and I dont want to use @ionicpage in isolate module.

is there a demo for it with ionic3?

2

Do you mean using modal controller without lazy loading?

If so, there isn’t a big difference when it goes to the typing.

With lazy loading you pass the name of your modal as a string and without lazy loading you pass the class itself

For example, let’s say that the modal name is ExampleModal

With lazy loading:

let myModal: Modal = this.modalController.create('ExampleModal', {anOptionnalParam: 'myValue'});

Without lazy loading

let myModal: Modal = this.modalController.create(ExampleModal, {anOptionnalParam: 'myValue'});
3

yes, I mean using modal controller without lazy loading.

I tried your suggestion.

import { ModalTrade } from '../../components';

        let ruleModal = this.modalCtrl.create(ModalTrade, { rule: rule });

but errors shows up.

ion-dev.js?v=3.1.8:156 ERROR Error: Uncaught (in promise): Error: No component factory found for ModalTrade. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ModalTrade. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:3789)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3853)
    at ModalCmp.ionViewPreLoad (modal-component.js:42)
    at ModalImpl.ViewController._lifecycle (view-controller.js:486)
    at ModalImpl.ViewController._preLoad (view-controller.js:348)
    at OverlayPortal.NavControllerBase._preLoad (nav-controller-base.js:753)
    at OverlayPortal.NavControllerBase._viewInit (nav-controller-base.js:443)
    at nav-controller-base.js:254
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4629)
    at noComponentFactoryError (core.js:3789)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3853)
    at ModalCmp.ionViewPreLoad (modal-component.js:42)
    at ModalImpl.ViewController._lifecycle (view-controller.js:486)
    at ModalImpl.ViewController._preLoad (view-controller.js:348)
    at OverlayPortal.NavControllerBase._preLoad (nav-controller-base.js:753)
    at OverlayPortal.NavControllerBase._viewInit (nav-controller-base.js:443)
    at nav-controller-base.js:254
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4629)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at OverlayPortal.NavControllerBase._fireError (nav-controller-base.js:223)
    at OverlayPortal.NavControllerBase._failed (nav-controller-base.js:216)
    at nav-controller-base.js:263
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4629)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3rd_place_medal:
4

Hello, no errors from server path?
Plus, it looks like there is a conflict of version with Apache, or module.

Have fun with Ionic,
Francois

5

@FrancoisIonic there is no request to server. " conflict of version with Apache, or module", what you mean?

I put modal component to entryComponents, there is no difference.

@NgModule({
declarations: [
components.ModalTrade
    ],
   entryComponents: [
        components.ModalTrade
    ]
6

@janckerchen

without lazy loading

let ruleModal = this.modalCtrl.create(ModalTrade...

with lazy loading

let ruleModal = this.modalCtrl.create('ModalTrade'...

note the quotes around the modal/page name

7

Did anyone solve this issue? I have recently run into this issue by moving from ionic v3 to v4 beta and from non-lazyloading to lazyloading (angular router.) I have the component that I want to use as a modal in a different module that can be accessed by the root module, and I exported the component/declaration so I can use it elsewhere. I tried the quotes around the name, but I still get the same error. Thanks!