Comments (6)
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.
from ngx-simple-modal.
from ngx-simple-modal.
I have the same problem
from ngx-simple-modal.
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
from ngx-simple-modal.
Can replicate - still a bug. Will look into
from ngx-simple-modal.
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).
- install
"@webcomponents/webcomponentsjs": "^2.2.10",
and addimport '@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.
from ngx-simple-modal.
Related Issues (20)
- ComponentFactoryResolver issue HOT 4
- where to change modal fade color ? HOT 1
- Hide Modal visibility on page redirect HOT 2
- @angular-devkit/build-angular 0.803.3 HOT 3
- AutoFocus doesn't trigger if animationDuration is 0 HOT 3
- Dynamic modal classes HOT 5
- Angular 9: ngOnDestroy is not triggered (Ivy ng9) HOT 11
- error when installing HOT 3
- mapDataObject doesn't check for null values resulting in a TypeError HOT 1
- Component inside modal with @HostListener('document.click') doesn't work HOT 1
- Model does not trap focus HOT 4
- Not working with Angular 11 HOT 6
- wrapperClass does not apply class to simple-modal-wrapper HOT 1
- Getting Cannot read properties of undefined (reading 'split') on modal close HOT 2
- Double call of onClosing callback for a modal that is subscribed
- ReflectiveInjector is deprecated and will be removed in v14
- Only allow single instance of modal
- Passing data example
- Error when upgrading from angular 15 to angular 16 HOT 3
- Support for Angular V17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-simple-modal.