Error opening Modal when exporting Web Components

[krigame]

Upon exporting Web Components on Angular 7, modals stop working. When an action tries to open a modal, I get the following error:

ERROR TypeError: Cannot read property 'hostView' of undefined
    at e.get [as container] (main.js:1)
    at e.createSimpleModalHolder (main.js:1)
    at e.addModal (main.js:1)
    at deleteRow (main.js:1)
    at Object.handleEvent (main.js:1)
    at Object.handleEvent (main.js:1)
    at Object.handleEvent (main.js:1)
    at yf (main.js:1)
    at Kf.r (main.js:1)
    at HTMLAnchorElement.t (main.js:1)

Upon disabling build minification, the error leads to this line: this.container = componentRootViewContainer.hostView.rootNodes[0];

I have tried to brute-force the issue and it seems it has something to do with how the SimpleModalModule is declared in app.module.ts - SimpleModalModule.forRoot({container: "modal-container"}). Upon building a web component, the root is missing, thus this hostView is undefined and modal can't inject itself into the page. Any ideas how to circumvent this issue would be most welcome. I have spent quite a lot of time on the issue, but as it is a purely ngx-simple-modal -related issue, Internet hasn't helped much.

[kevcjones-archived]

I will look into as soon as I can, thanks for the feedback

On Wed, 28 Nov 2018, 17:14 Kristjan Kalmus <notifications@github.com wrote:

Upon exporting Web Components on Angular 7, modals stop working. When an action tries to open a modal, I get the following error:

ERROR TypeError: Cannot read property 'hostView' of undefined at e.get [as container] (main.js:1) at e.createSimpleModalHolder (main.js:1) at e.addModal (main.js:1) at deleteRow (main.js:1) at Object.handleEvent (main.js:1) at Object.handleEvent (main.js:1) at Object.handleEvent (main.js:1) at yf (main.js:1) at Kf.r (main.js:1) at HTMLAnchorElement.t (main.js:1)

Upon disabling build minification, the error leads to this line: this.container = componentRootViewContainer.hostView.rootNodes[0];

I have tried to brute-force the issue and it seems it has something to do with how the SimpleModalModule is declared in app.module.ts - SimpleModalModule.forRoot({container: "modal-container"}). Upon building a web component, the root is missing, thus this hostView is undefined and modal can't inject itself into the page. Any ideas how to circumvent this issue would be most welcome. I have spent quite a lot of time on the issue, but as it is a purely ngx-simple-modal -related issue, Internet hasn't helped much.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/49, or mute the thread https://github.com/notifications/unsubscribe-auth/AAqe8AOMjJG1tnmjK3hSpy_62xCJsYXvks5uzsSCgaJpZM4Y4EFL .

[krigame]

I created a blitz project, so it would be easier to reproduce the issue. https://stackblitz.com/edit/angular-jmswek

You should download the project and run it locally, as the component build has to happen locally anyway. When serving the project with webpack the modal works and the confirm/decline messages are added to console log according to the button pressed on modal, so all is as expected.

Exporting a web component.

• Comment out line 25: 'AppComponent' before build (otherwise the exported component still looks for the root tag)
• UnComment lines 37-38 (blitz didn't like those lines for some reason, but these lines define the exported component)
• Run 'npm run build:elements'
• In the generated index.html, replace < my-app > with < page-views > as this is the exported web component
• Open the index.html somewhere (I usually test them using WAMP, but there are probably some easier methods)
• No modal should pop up after button press / related error should show up in console.

[dima11221122]

I have the same problem

[kevcjones-archived]

PageComponent.html:2 ERROR TypeError: Cannot read property 'hostView' of undefined
    at SimpleModalService.get [as container] (simple-modal.service.js:58)
    at SimpleModalService.push../node_modules/ngx-simple-modal/dist/simple-modal/simple-modal.service.js.SimpleModalService.createSimpleModalHolder (simple-modal.service.js:77)
    at SimpleModalService.push../node_modules/ngx-simple-modal/dist/simple-modal/simple-modal.service.js.SimpleModalService.addModal (simple-modal.service.js:35)
    at PageComponent.push../src/app/page.component.ts.PageComponent.openModal (page.component.ts:22)
    at Object.eval [as handleEvent] (PageComponent.html:2)
    at handleEvent (core.js:21673)
    at callWithDebugContext (core.js:22767)
    at Object.debugHandleEvent [as handleEvent] (core.js:22470)
    at dispatchEvent (core.js:19122)
    at core.js:19569

[kevcjones-archived]

Can replicate - still a bug. Will look into

[kevcjones-archived]

Ok this wasn't technically a bug there were two things i did after i downloaded your project @krigame (btw i appreciate this is about 7 months late but this is for future people too).

1. install "@webcomponents/webcomponentsjs": "^2.2.10", and add import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'; to the polyfills.

Then the main part - when you exported the web-component you defined a container `modal-container.

Basically that was needed

<html>
  <head>
    <title>Angular App</title>
  </head>
  <body>
    <page-views></page-views>
    <div id="modal-container"></div>
  <script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

I admit after seeing how ungracefully it handles misconfiguration i'm going to put in something that doesn't crap out in the next block which isn't friendly to webcomponents and have it default back to 'body' instead.