I have a component in polymer 3.0. Currently only Chrome Version 67.0.3396.99 supports is out of the box.
And Firefox 61.0.1 gives error TypeError: window.customElements is undefined .
Edge gives the following error:
SCRIPT5007: SCRIPT5007: Unable to get property
'polyfillWrapFlushCallback' of undefined or null reference
settings.js (15,14). SCRIPT5131: SCRIPT5131: Function is not a
constructor.
Polymer docs are not clear and don't have step by step guide that works without issues. Can some one provide tried and tested steps to make Polymer 3.0 components work in latest browser and also in older browsers like IE11.
Install polyfills:
npm install #webcomponents/webcomponentsjs
Then load webcomponents-loader.js to check and load any polyfills your browser needs. In your index.html, before any reference to web components add this:
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
Hope this will help someone!
I was able to get it running by adding webcomponents-loader.js like:
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="./components/subscriber-modal.js" type="module"></script>
But now I need to find a way to convert ES6 WebComponent to ES5 so as to use
<script src="./node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
to run the transpiled component. But just using babel gives require not defined error. So will try to use browserify.
Note that you have to load synchronously your webcomponents-loader.js, so make sure don't use async in your (in chrome it works well with async, but ie doesn't).
At first time I encountered the same issue, and my script is below:
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>
Related
To sketch out my problem: We have an angular app, which is served by basic auth protected server. This app is supposed to run among others in IE11 and Safari 12. And we have differential build to cover for es5 and es2015+ environments.
Now when it comes to build-produced index.html, Safari 12 needs to have crossorigin attribute on <script type="module"> there in order to send BA credentials to the BA-protected server (although the client and server domain match). Without the attribute, it doesn't send them and the request fails with 401. It turns out, that some older browsers, like Safari 12, implement older version of spec for type=module script fetching, which doesn't send the auth credentials automatically. Newer browsers implement newer version of the spec and the credentials are sent correctly (that's why Safari 13 works for me).
So my fix for this issue was to set crossorigin="anonymous" attribute via angular.json. This causes every build to produce <script>s for both es5 and es2015 bundles with this attribute, which fixed the issue in Safari 12. So far so good.
But then I discovered, that IE11 doesn't handle this attribute well. In fact, the crossorigin attr is not supported in IE11, which shouldn't make a difference, but it doesn't send the credentials when sending request for script, regardless of its type="", which naturally fails with 401 again. When I remove the crossorigin attribute, it fixes the issue in IE11, but guess what, breaks Safari 12 again.
With all that in mind, the logical solution would be to add crossorigin only to es2015 scripts (for Safari 12) and leave es5 scripts intact (for IE11). This is more difficult than it sounds though, because as it seems, angular-cli doesn't have the option to distinguish based on ES target. It just provides an option to set crossorigin on all produced scripts.
And this is where the actual questions come in:
Is there an easy way to do this with angular-cli? Outside of writing some kind of a node script that does this for me.
Am I perhaps approaching this problem from a wrong angle? Is there a better way to solve this credential sending problem?
And bonus question: Why isn't IE11 able to handle the (for it) unknown crossorigin attribute? I thought unknown attributes are just ignored.
I am learning Vue.js and am playing around with it using jsFiddle. Vue.js is natively supported by jsFiddle.
However, I can not use the Chrome Browser's vue.js dev-tools with jsFiddle, as it's not detecting it. The little "V"-icon always stays disabled, saying "vue.js not detected".
Now, the problem is, that jsFiddle renders the result in an HTML iframe, and dev-tools as is does not check any iframe for Vue.js apps, as for example, mentioned in this github issue.
I never managed to escape the iframe. Even when opening the framed content's URL in a new window, the resulting HTML page again contains an iframe.
How to use the Vue.js dev-tools with jsFiddle?
My solution to this is using the standalone dev-tools with node.js, as proposed by Geoff Baum in his comment on github.
Just install Vue Developer Tools globally:
npm install -g #vue/devtools
Then run it globally:
vue-devtools
In your fiddle, right on top, just add the proposed script URL:
<script src="http://localhost:8098"></script>
Here's a working jsFiddle, using the standard example: https://jsfiddle.net/suterma/zr2vtg84/4/
<script src="http://localhost:8098"></script>
<div id="app">
<h2>Todos:</h2>
....
</div>
Here's how it looks:
http://vuejs.froid.works/john
This link is perfectly working fine on chrome. But when IE11 it shows the elements.
I tried adding babel and polyfill but no success.
http://vuejs.froid.works/john/babel.html
It is single page website. Vuejs is used as cdn in script tag. I am not using any webpack.
You can check the code by viewing its source code
You can't use ES6 function syntax without back filling support for it with babel if you want to support browsers without ES6 support native. Why babel doesn't work for you is probably due to several things, but it doesn't matter.
This syntax:
mounted() {
Cannot be used if you aren't transpiling it down, so instead use:
mounted: function() {
Starting with a clean version of the Polymer Starter Kit (2.0.1), I was attempting to implement some Embedly cards as described in this post.
Everything is working fine on Firefox and Edge, but cards are not loading on Chrome.
I vaguely suspect this may be because the asynchronous XMLHttpRequest calls in the imported embedly platform javascript file were seen as synchronous, and deprecated on Chrome.
Anybody faced a similar issue?
Could you advice on a workaround?
I was following GWT tutorial
https://developers.google.com/web-toolkit/doc/2.1/tutorial/compile
And at the last step, which was compilation, I got a problem.
When I successfully compiled the application, and when I clicked on the index html using chrome, all it showed was the static elements written inside the html file, not the dynamic contents.
However, I found it worked under safari.
I found the older version of the same tutorial
https://developers.google.com/web-toolkit/doc/1.5/tutorial/compile
which says that to test the web mode after compilation, a default browser is needed, for my Mac, it's safari.
GWT version: 2.5.1
I'm wondering why this happened?
Any solution?
Will it happen when I put it to the server?
Thanks in advance!
GWT apps (by default) can't be run from the filesystem, they must be served by an HTTP server.
The reason is that the GWT app runs in an iframe, and two file:// URLs are considered different origins (for security reasons), so the iframe cannot communicate with the host page.
Try adding <add-linker name="xsiframe"/> to your *.gwt.xml (no guarantee though)