Closed manujoz closed 7 years ago
Does it work in chrome? I'm not sure you have to import polymer.html
itself inside index.html
Try installing polymer-cli
and generating simple application.
To run on IE11, you need to transpile Polymer (and any elements you're using) to ES5.
If you use polymer serve
as a development server, it should transpile your code automatically for IE.
For regular deployment, you're going to want to transpile your code. polymer build
will do this for you if you use the es5-bundled
preset.
For example:
polymer build --preset es5-bundled
Or configure this in your polymer.json
file:
builds: [{
"preset": "es5-bundled"
]
... Then you can just run:
polymer build
With no arguments.
Related docs:
Browser support overview: https://www.polymer-project.org/2.0/docs/browsers ES6: https://www.polymer-project.org/2.0/docs/es6 Build for production: https://www.polymer-project.org/2.0/toolbox/build-for-production
I have the same issue. Used polymer cli to create a PRPL application skeleton and it works in Chrome but does not work in IE11. Apps created with Polymer 1.0 cli were working in IE11
Using polymer serve
transpiles your code to ES5 on the fly, if you use another dev server, you have to run polymer build
.
Polymer 1.x is written with ES5, but Polymer 2 uses ES2015, which is not supported by IE without transpilation.
Mr. @arthurevans is right. I got it working on IE11 with polymer build.
You have all the documentation arthurevans's comment.
Thank you so much.
Same issue with mine but it also does not work with iPhone 6 Safari.
Configured the builds as per @arthurevans
"builds": [ { "preset": "es5-bundled" } ]
Used
polymer build
Now I have this on IE11 on Windows 10.
@woisme I cofigured my json on this way:
{
"lint": {
"rules": [
"polymer-2"
]
},
"sources": [
"bower_components/**/*",
"my_components/**/*"
],
"builds": [{
"name": "es5",
"js": {"minify": true, "compile": true},
"css": {"minify": true},
"html": {"minify": true},
"addServiceWorker": false,
"insertPrefetchLinks": false
}]
}
In the build folder I have all polymer and components transpilated. It is these files that you must to use.
After in the HTML or PHP file where you import Polymer you must do that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<title>prueba</title>
<meta name="description" content="Hola prueba">
<link rel="manifest" href="/manifest.json">
<script>!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);</script>
<script>if (!window.customElements) { document.write('<!--'); }</script>
<script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!--! do not remove -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/my_components/my-component/my-component.html">
</head>
<body>
</body>
</html>
That work for me. But I created the same configuration a little more elegant way:
webcomponents-personal.js
!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);
(function() {
if ( window.customElements ) {
var script = "script";
document.write( '<' + script + ' src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></' + script + '>' );
}
})();
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<title>prueba</title>
<meta name="description" content="Hola prueba">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-personal.js"></script>
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/my_components/my-component/my-component.html">
</head>
<body>
</body>
</html>
Again, sorry for my english.
Thank you for that @arismanwebs. But still the same result.
Can u write the code of you index.html?? @woisme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Lamorna Wink">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<title>Lamorna Wink</title>
<meta name="description" content="Lamorna Pub and Restaurant">
<base href="/">
<link rel="icon" href="images/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#3f51b5">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Lamorna Wink">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Lamorna Wink">
<link rel="apple-touch-icon" href="images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="images/manifest/icon-192x192.png">
<meta name="msapplication-TileImage" content="images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
! function(e) {
var r = e.babelHelpers = {};
r.typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
return typeof e
} : function(e) {
return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
}, r.classCallCheck = function(e, r) {
if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function")
}, r.createClass = function() {
function e(e, r) {
for (var t = 0; t < r.length; t++) {
var n = r[t];
n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, n.key, n)
}
}
return function(r, t, n) {
return t && e(r.prototype, t), n && e(r, n), r
}
}(), r.defineEnumerableProperties = function(e, r) {
for (var t in r) {
var n = r[t];
n.configurable = n.enumerable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, t, n)
}
return e
}, r.defaults = function(e, r) {
for (var t = Object.getOwnPropertyNames(r), n = 0; n < t.length; n++) {
var o = t[n],
i = Object.getOwnPropertyDescriptor(r, o);
i && i.configurable && void 0 === e[o] && Object.defineProperty(e, o, i)
}
return e
}, r.defineProperty = function(e, r, t) {
return r in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e
}, r.extends = Object.assign || function(e) {
for (var r = 1; r < arguments.length; r++) {
var t = arguments[r];
for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n])
}
return e
}, r.get = function e(r, t, n) {
null === r && (r = Function.prototype);
var o = Object.getOwnPropertyDescriptor(r, t);
if (void 0 === o) {
var i = Object.getPrototypeOf(r);
return null === i ? void 0 : e(i, t, n)
}
if ("value" in o) return o.value;
var a = o.get;
if (void 0 !== a) return a.call(n)
}, r.inherits = function(e, r) {
if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function, not " + typeof r);
e.prototype = Object.create(r && r.prototype, {
constructor: {
value: e,
enumerable: !1,
writable: !0,
configurable: !0
}
}), r && (Object.setPrototypeOf ? Object.setPrototypeOf(e, r) : e.__proto__ = r)
}, r.instanceof = function(e, r) {
return null != r && "undefined" != typeof Symbol && r[Symbol.hasInstance] ? r[Symbol.hasInstance](e) : e instanceof r
}, r.newArrowCheck = function(e, r) {
if (e !== r) throw new TypeError("Cannot instantiate an arrow function")
}, r.objectDestructuringEmpty = function(e) {
if (null == e) throw new TypeError("Cannot destructure undefined")
}, r.objectWithoutProperties = function(e, r) {
var t = {};
for (var n in e) r.indexOf(n) >= 0 || Object.prototype.hasOwnProperty.call(e, n) && (t[n] = e[n]);
return t
}, r.possibleConstructorReturn = function(e, r) {
if (!e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return !r || "object" != typeof r && "function" != typeof r ? e : r
}, r.set = function e(r, t, n, o) {
var i = Object.getOwnPropertyDescriptor(r, t);
if (void 0 === i) {
var a = Object.getPrototypeOf(r);
null !== a && e(a, t, n, o)
} else if ("value" in i && i.writable) i.value = n;
else {
var u = i.set;
void 0 !== u && u.call(o, n)
}
return n
}, r.slicedToArray = function() {
function e(e, r) {
var t = [],
n = !0,
o = !1,
i = void 0;
try {
for (var a, u = e[Symbol.iterator](); !(n = (a = u.next()).done) && (t.push(a.value), !r || t.length !== r); n = !0);
} catch (e) {
o = !0, i = e
} finally {
try {
!n && u.return && u.return()
} finally {
if (o) throw i
}
}
return t
}
return function(r, t) {
if (Array.isArray(r)) return r;
if (Symbol.iterator in Object(r)) return e(r, t);
throw new TypeError("Invalid attempt to destructure non-iterable instance")
}
}(), r.taggedTemplateLiteral = function(e, r) {
return Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(r)
}
}))
}, r.temporalRef = function(e, r, t) {
if (e === t) throw new ReferenceError(r + " is not defined - temporal dead zone");
return e
}, r.temporalUndefined = {}, r.toArray = function(e) {
return Array.isArray(e) ? e : Array.from(e)
}, r.toConsumableArray = function(e) {
if (Array.isArray(e)) {
for (var r = 0, t = Array(e.length); r < e.length; r++) t[r] = e[r];
return t
}
return Array.from(e)
}
}("undefined" == typeof global ? self : global);
</script>
<script>
var baseUrl = document.querySelector('base').href;
'serviceWorker' in navigator && window.addEventListener('load', function() {
navigator.serviceWorker.register(baseUrl + 'service-worker.js')
});
</script>
<script>
if (!window.customElements) {
document.write('<!--');
}
</script>
<script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!--! do not remove -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app><noscript>Please enable JavaScript to view this website.</noscript></body>
</html>
I am trying to run Polymer 2.0 in IE11 and i allways get the same error:
I instal Polymer 2.0 and anything more and a create the follow document.
I tried using differents polyfills with the same result. In Polymer Web Page you can read browser supports and IE11+ is supported, so, why i can´t load the Polymer?
Steps to Reproduce
Browsers Affected
Version
Sorry for my english.