polymer-cli v1.0.2 - polymer v2 element creation errors

mbghsource commented 7 years ago

Description

polymer init does not include bower_components in html imports href and scripts src paths The diff between a project as generated and corrected is attached diff.txt

Polymer CLI: 1.0.2
node: v6.10.3
Operating System: Ubuntu 16.04.2 LTS

Steps to Reproduce

mkdir polymer-element && cd polymer-element
polymer init 3 choose polymer-2-element
bower install (if not already run by polymer init)
polymer serve
visit http://localhost:8081/demo

Expected Results

Demo page should show the element in a card below the title

Basic polymer-element demo

Hello polymer-element!

Actual Results

Demo page only shows the title "Basic polymer-element demo"

Homa commented 7 years ago

use webcomponents-loader.js instead of webcomponents-lite.js.

FredKSchott commented 7 years ago

@mbghsource I can't reproduce, are you making changes to the element generated by the CLI?

thomastodon commented 7 years ago

You can navigate to http://127.0.0.1:8081/components/polymer-element, without making any changes to the template, and see the demo without any 404's

mbghsource commented 7 years ago

@thomastodon Thank you for your suggestion. The URL you've suggested redirects me to the demo. I just noticed that "polymer serve" provides this URL in a info message.

@FredKSchott - I have not made any changes to the element generated by the CLI. The steps I've documented in the bug are exactly the steps that I followed.

DaveMonag commented 7 years ago

I can second this. By running polymer init in a fresh folder outside any project then selecting polymer element, and when completed, running polymer serve Opening localhost:8000 will show only this:

Because:

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
    <link rel="import" href="../issue-example-element.html">

These href links do not reference bower_components, they instead reference "../", as I think that they assume this component is already INSIDE a bower_components folder. Meaning if you just run polymer_serve, in this folder on it's own outside a project, it will just show that header, but if it were inside a project's bower_components file containing the webcomponents-lite, demo-pages-shared-styles and demo-snipped, it would work properly. Also the link to polymer-element in your element's html has the same problem: <link rel="import" href="../polymer/polymer-element.html">

By manually adding bower_components to these import URLs, you then get this:

Are these elements meant to be runnable standalone like this? If so, why does it install it's own bower_components?

justinfagnani commented 7 years ago

The problem here is that re-usable elements need to be accessed from one URL, and applications another. For reusable elements you don't want to include bower_components in import paths, but for applications you do.

We have a number of issues related to better detection of the style of a project and differing the UX depending on it.

I couldn't find an existing issue in the CLI repro, so I created https://github.com/Polymer/polymer-cli/issues/867 to track it.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Polymer / tools