CODEWITHSUNDEEP
polymerbowerbower-install
Typel
Typel

Reputation: 1139

Bower Installed Polymer is broken but web hosted libraries work

I followed The Bower installation method to install the Polymer library as recommended on the Polymer Project website. Specifically, I ran these commands from the root of my project's live web folder. The OS is Amazon Linux:

bower init
bower install --save Polymer/polymer#^1.2.0
bower update

This generated the following files/folders:

/bower.json
/bower_components/*
/bower_components/polymer/*
/bower_components/webcomponentsjs/*

To test whether the libraries were successfully installed, I went ahead and grabbed one of the examples from the tutorial and tried it out. Only the first line of this code comes into question, but I'm including all of it to dispel concerns that the code here is at fault:

elements/proto-element.html

// THIS is the line that doesn't work. The file exists, it was 
// installed in the correct location. However, the polymer.html file 
// itself appears to be broken
<link rel="import" href="../bower_components/polymer/polymer.html">

// HOWEVER, if I change it to link the library in from the web, everything 
// works perfectly. As in this example:
<!--<link rel="import" href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">-->

<polymer-element name="proto-element">
  <template>
  <span>Hello World.</span>
  </template>
  <script>
    Polymer({
      ready: function() {
      }
    });
  </script>
</polymer-element>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>

I examined the polymer.html file in question. The file that bower installed is completely different from the one available on the web. I guess my question is - is the bower install of Polymer just broken? Why is Bower installing a version other than the active stable release? Am I missing something?

If you open the web version's code, it is clearly marked as version 0.5.5, even though it is being pulled from the /1.0/ pool.

The bower version has no version markers in the code so I'm not sure which one it is, though I have to assume it is the latest 1.2.x stable release because that was specified in the install command. I'll note that I did try it without specifying any version as well (supposed to just install the very latest then) but that still didn't work.

Conclusion

The libraries Bower installed were working files after all. The problem was that the examples I had pulled from the "Getting Started" tutorial on the Polymer-Project.org website were outdated. Be very careful to select v. 1.0 from the top right hand corner.

Upvotes: 0

Views: 131

Answers (1)

Neil John Ramal
Neil John Ramal

Reputation: 3734

It's not going to work as you're using the old way of declaring elements (pre v0.8).

Here's how you declare new elements:

<dom-module id="my-element"> <!-- ID must be the same as that of the name of the element you declared. -->
  <template> <!-- Styles used to be declared outside the template v0.8 to v1.0. At v1.1 it is now declared inside the template (the outside declaration still works, it's just slow and discouraged).  -->
    <style> 
      :host {
        display: block;
      }
    </style>
    <div>Hello {{name}}.</div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element', // you must declare the name of your element
    properties: { // declare your element's properties here
        name: {
            type: String,
            value: 'Neil'
        }
    }
  });
</script>

Also, the official hub/CDN for the library is at http://polygit.org, not at the official website.

Upvotes: 1

Related Questions