I have worked with Polymer 1.x for a while and I want to start a project from scratch with Polymer 2.0 but I get many errors. I am building a PWA as I did before, therefor I included a service worker and a manifest.json file. The errors I get are, I think, most of incompatibility between versions since they claim some classes not defined or undefined "window" object (like in the second error)
For versions I followed this guide (point: Upgrade an existing project)
https://www.polymer-project.org/2.0/docs/about_20#polymer-1-compatibility-layer
First error:
platinum-sw-register.html:111
Uncaught ReferenceError: HTMLImports is not defined at platinum-sw-register.html:111
and
Uncaught TypeError: Cannot read property 'nativeMethods' of undefined
at pa (style-util.js:243)
at p.u (style-properties.js:499)
at k.T (scoping-shim.js:299)
at k.styleElement (scoping-shim.js:243)
at Object.styleElement (scoping-shim.js:52)
at HTMLElement.connectedCallback (element-mixin.html:636)
at HTMLElement.connectedCallback (legacy-element-mixin.html:81)
I have the following index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>AppTest</title>
<link rel="import" href="bower_components/app-layout/app-layout.html"/>
<link rel="import" href="bower_components/platinum-sw/platinum-sw-elements.html"/>
<link rel="manifest" href="manifest.json"/>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- <script src="bower_components/web-animations-js/web-animations.min.js" async></script> -->
<link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">
</head>
<body>
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="sw-import.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<app-header reveals>
<app-toolbar>
<div main-title>My app</div>
</app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>
</body>
<script>
</script>
</html>
and my bower.json
{
"name": "polymer-2-carousel",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0-rc.3",
"platinum-sw": "PolymerElements/platinum-sw#2.0-preview",
"app-layout": "PolymerElements/app-layout#2.0-preview"
}
}
As you can see the application is a skeleton very simple (just a test to start with) so there should not be much to get wrong or to investigate to find the cause of the error but I do not understand what is the problem and how to fix it. Any help would be appreciate.
I found this problem too, so I have to change these lines below in bower-components/platinum-sw/platinum-sw-register.html file:
value: document._currentScript ? document._currentScript.baseURI :
(HTMLImports.importForElement ? HTMLImports.importForElement(document.currentScript).baseURI :
(document.currentScript ? document.currentScript.baseURI : './'))
To:
value: document._currentScript ? document._currentScript.baseURI :
(document.currentScript ? document.currentScript.baseURI : './')
I hope that helps.
Related
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
i'm trying to deploy my react app through firebase but after deploying i get a blank page and the SyntaxError: expected expression, got '<'. i think this is because it's reading the < from html but i'm not sure how to solve this. below is the index.html form my build folder which is initialized as the source for firebase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link href="../src/App.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:900" rel="stylesheet">
<link rel="manifest" href="/CV/manifest.json">
<link rel="shortcut icon" href="/CV/favicon.ico">
<title>Lorenzo Wijtman</title>
<link href="/CV/static/css/main.1b15713e.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/CV/static/js/main.1b785adb.js"></script>
</body>
</html>
my firebase.json content below
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Your HTML contains this script include:
<script type="text/javascript" src="/CV/static/js/main.30b4dcd1.js"></script>
If you try to load this URL, you will see that you're getting back your original HTML, instead of a JavaScript file. Since you told the browser to expect JavaScript, it is complaining about the angular brackets.
It looks like you're not deploying a /CV/static/js/main.30b4dcd1.js. Since you're telling Firebase Hosting to rewrite everything to /index.html, that's what it does when there is no matching file for a URL.
In this jsBin, I am trying to display a google-chart element by copypasting the first example from the docs page here. But the chart does not display.
Can anyone confirm or reject my hypothesis that the reason the bin is not working is because of a similar temporary server issue at polygit2.appspot.com (similar to this case of two days ago)? Or is there something wrong with the code that needs fixing?
http://jsbin.com/dusaqaqaje/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<link href="google-chart/google-chart.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-button on-tap="_handleTap">Click Me</paper-button>
<!---- >
Below is just a copypaste from the docs page here:
https://elements.polymer-project.org/elements/google-chart
<!---->
<google-chart
type='pie'
options='{"title": "Distribution of days in 2001Q1"}'
cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
</google-chart>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
},
_handleTap: function() {
console.log('You clicked me!');
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
I think it's a temporary server issue, as you already proposed. Importing this google-chart element via polygit just throws an error instead of serving the element (you may see this behaviour in your import link).
Hopefully this will be fixed soon.
I tried to extend a <button>, but so far did not succeed.
What am I doing wrong. I'm using the Dart Editor+SDK 1.5.2
In pubspec.yaml the version for Polymer is set to:
polymer: ">=0.11.0 <0.12.0"
index.html
<!DOCTYPE html>
<html>
<head>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Extended Button - Dart v1.5.2</title>
<!--Extended Button-->
<link rel="import" href="view/ext_button.html" />
</head>
<body>
<button is="ext-button">Test Button</button>
<script type="application/dart">export "package:polymer/init.dart";</script>
</body>
</html>
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement {
ExtButton.created() : super.created();
factory ExtButton(){
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
So the code above does not work, but as soon as write it like below (just to validate the ext-button works) it tells me the following:
"web/index.html:20:7: custom element "ext-button" extends from "button", but this tag will not include the default properties of "button".
To fix this, either write this tag as <button is="ext-button"> or remove the "extends" attribute from the custom element declaration."
<ext-button>Test Button</ext-button>
So a little bit confused ;-) I think the fix is easy and simple - but I just don't see the problem ;-(
Just for further references, the two things above solved the problem.
Here are the updated parts, now it works.
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement with Polymer {
ExtButton.created() : super.created()
{
polymerCreated();
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
<content></content>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
As far as I see, you are missing thwo things:
a call to polymerCreated() inside the custom elements constructor.
and extends ButtonElement with Polymer
There are already similar question. I'll look them up later when I have more time. Maybe you find them yourself in the meantime. Please add a comment with a link if you do.
Here is my index.html
<html lang="en" ng-app="bootstrapDemoApp" id="top">
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="styles/select2.css" rel="stylesheet"/>
<link href="styles/select2-bootstrap.css" rel="stylesheet"/>
<link href="styles/style.css" rel="stylesheet"/>
<title>Bootstrap App</title>
</head>
<body>
<div class="container-fluid" ui-view>
</div>
<hr/>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="scripts/select.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>
My JS Code:
var bootstrapApp = angular.module('bootstrapDemoApp', ['ui.bootstrap','ui.router','ngSanitize', 'ui.select']);
Now, when i go to my URL i get the following error:
GET http://localhost/ASC/template/tooltip/tooltip-popup.html 404 Not Found 0ms angular.js (line 7991)
I am getting this error with "accordion-group", "alerts", "buttons", and all the angularUI bootstrap directives!
I cant figure what am i doing wrong here. i have included the proper "tpls" file. And included that in my app module as well.
Please help me out!
Okay, so here's the deal... ui-bootstrap-tpls-*.js files contain the templates so that we don't have to define the templates ourseleves (though we can override the default design!). Now, these templates are stored in $templateCache. I had the following line in my script.js file:
$templateCache.removeAll();
This piece of code removed all the stored templates. Remove this line and VOILA :)