Minimal working Polymer example

问题

I've been trying to get an extremely minimal web page using Polymer to simply render in the browser - I'm using a Node/ExpressJS/Jade setup on the server-side of things. My code is as close as it gets to the examples that ship with the Polymer documentation, I think I'm missing something really simple. I'm using Chrome M35.

On the server, I have installed all the Polymer stuff (platform, core and paper) using bower and I've mapped bower_components to be served statically under /static

app.use('/static', express.static(path.join(process.cwd(), 'bower_components')))

I've verified that my server can correctly serve resources such as http://localhost:3000/static/paper-button/paper-button.html – this returns the content of the desired file.

The HTML served by the page is as such:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="/static/platform/platform.js"></script>
    <title>Authenticate</title>
    <link rel="import" src="/static/paper-button/paper-button.html">
    <style>
      body {
        font-family: 'Helvetica Neue';
        margin: 0;
        padding: 24px;
        user-select: none;
        transform: translateZ(0);
      }

      paper-button {
        margin: 1em;
        width: 10em;
      }

      paper-button.colored {
        color: #4285f4;
        fill: #4285f4;
      }

    </style>
  </head>
  <body>
    <paper-button label="Authenticate" class="colored"></paper-button>
  </body>
</html>

This is as close as it gets to the example for the same widget as documented on the Polymer website. In my case, nothing renders. The really odd thing is what is shown in the Network tab of the inspector:

There is a Loader.js script, which I believe gets installed by platform.js, which sends an XHR for the root page itself (the 3rd line). In every other example I see, that loading script starts loading the imported web components. I just can't figure out why it's doing this in my case. The other odd thing is the call originating from Parser.js – the requested data URL is data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK, which translates to: //# sourceURL=null/[1453].js - again, not a very good sign.

I've tried to use relative srcs in my links - to no avail. I'm basically stuck at a very early stage and would really appreciate to be pointed in the right direction.

回答1:

This is not right:

<link rel="import" src="/static/paper-button/paper-button.html">

It should be:

<link rel="import" href="/static/paper-button/paper-button.html">

Side note: You might also want to use the favicon express middleware to prevent a "suspicious" http request. (If you don't have a favicon in your public root, you'll see an extra http request being handled by express, the middleware will serve the express favicon if you don't have one in your public root.)

来源：https://stackoverflow.com/questions/24728489/minimal-working-polymer-example

标签

node.js

polymer