Lazy loaded component modal opening doesn't work

[maximelafarie]

While opnening a modal from lazy loaded component, we have the following error:

ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded

This feature is now broken so we need to find a fix asap.

[LouisAugry]

I've the correct error on my stackblitz Cannot find modal with identifier customers

https://stackblitz.com/edit/angular-lazy-loading-smart-modal

[khylias]

I've the correct error on my stackblitz Cannot find modal with identifier customers

So far I think it's normal. The modal DOM is no longer available because it is in the client component and therefore no longer available. 🤔

[LouisAugry]

I've the correct error on my stackblitz Cannot find modal with identifier customers

So far I think it's normal. The modal DOM is no longer available because it is in the client component and therefore no longer available. 🤔

Yes this error message is normal, but the @maximelafarie one isn't

[maximelafarie]

@khylias @LouisAugry you can try it on the demo 😉

[LouisAugry]

This is a demo's issue, not coming from ngx-smart-modal

[LouisAugry]

There is no problem on local, and on prod ngx-smart-modal.biig.now.sh. Maybe github-page have wrong configuration

[marie-dk]

I've the correct error on my stackblitz Cannot find modal with identifier customers

https://stackblitz.com/edit/angular-lazy-loading-smart-modal

I just made a stackblitz with Angular 9 and NgxSmartModal. I get the same error. Did you figure it out?

[Michi-2142]

Any updates on this?

[khylias]

It's been a while since I've worked on the module, but I'm still convinced that it's a DOM instance problem. Indeed, the NgxSmartModalService will not be able to invoke a modal of a component that no longer exists. This means that the modal must be defined at a higher level in the project architecture.

Any suggestions @maximelafarie ? 🤔

[Michi-2142]

I got it working by inserting my modal component to top of the component from which I will open the modal. <my-modal></my-modal> where my-modal holds the ngx-smart-modal definition. As @khylias mentioned it is DOM issue. With my workaround i forced the modal to be part of DOM.

[lfbharat]

I was facing ERROR Error: Cannot find modal with identifier. ngx modal throwing error when I try to open or close modal using ngxSmartModalService.open('identifier') or ngxSmartModalService.close('identifier') in component ts file.

but when I try using modal reference. it solved my problem:

HTML:

<button (click)="modalPopup.open();">open modal</button>

<ngx-smart-modal #modalPopup identifier="identifier"> </ngx-smart-modal>

[LouisAugry]

I was facing ERROR Error: Cannot find modal with identifier. ngx modal throwing error when I try to open or close modal using ngxSmartModalService.open() or ngxSmartModalService.close() in component ts file.

but when I try using modal reference. it solved my problem:

HTML:

<button (click)="modalPopup.open();">open modal</button>

<ngx-smart-modal #modalPopup identifier="identifier"> </ngx-smart-modal>

Hey !

The open and close methods on the service need an identifier https://maximelafarie.com/ngx-smart-modal/#/api

[lfbharat]

I was facing ERROR Error: Cannot find modal with identifier. ngx modal throwing error when I try to open or close modal using ngxSmartModalService.open('identifier') or ngxSmartModalService.close('identifier') in component ts file. but when I try using modal reference. it solved my problem: HTML: <button (click)="modalPopup.open();">open modal</button> <ngx-smart-modal #modalPopup identifier="identifier"> </ngx-smart-modal>

Hey !

The open and close methods on the service need an identifier https://maximelafarie.com/ngx-smart-modal/#/api

Yes @LouisAugry updated the comment ^.