Tools: Problems with polymer-2-element template

[dfreedm]

_From @nicolasr75 on March 14, 2017 18:25_

Description

The polymer-2-element template does not work because of wrong paths.

Steps to Reproduce

Do _polymer init_

Select the _polymer-2-element_ template

Do _polymer serve_ as described in the readme

Start a browser and go to http://localhost:8081

Expected Results

The browser should load the page and display _Hello my-elem_
(because I selected my-elem as the element name in the wizard).

Actual Results

The page stays blank and the dev tools console shows

GET http://localhost:8081/webcomponentsjs/webcomponents-loader.js 404 (Not Found)
GET http://localhost:8081/iron-component-page/iron-component-page.html 404 (Not Found)

Looking at index.html one can see that the generated paths are missing the bower_components directory. F.e. the generated path to webcomponents is:
../webcomponentsjs/webcomponents-loader.js
(Note: in the application template this works because the paths are correct there!)

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Safari 9
• [x] Safari 8
• [x] IE 11

Versions

• Polymer: v0.18.0-pre.13
• webcomponents: v1.0.0.-rc.5

_Copied from original issue: Polymer/polymer#4430_

[dfreedm]

_From @jsilvermist on March 14, 2017 22:24_

If you serve with polymer serve --open so that it opens to the components pseudo directory, does this fix the issue?

[dfreedm]

_From @nicolasr75 on March 14, 2017 22:44_

Well, it opens a description page where I also have a button to start a demo. This demo works. Unfortunately I cannot simply refresh it to view changes in my element. A refresh brings me back to the description page.
I don't understand what's the use of the index.html in the base directory. Looks like I cannot request it, be it with or without --open. Is this a bug or am I misunderstanding something?

[BillRobitskeJr]

I'm seeing a similar issue when using IE11. When I specifically open the /demo/ directory, I'm able to see the "Hello test-component" demo just fine. If I open just the component directory though, I don't get any 404 errors, but 2 script errors:

SCRIPT5022: Exception thrown and not caught File: hydrolysis.js, Line: 1624, Column: 739 SCRIPT5007: Unable to get property 'replace' of undefined or null reference File: webcomponents-lite.js, Line: 1508, Column: 13

[recluising]

Maybe there are also problems at iron-component-page:

I have created a simple polymer-2-element using cli. I kept it as it was, no modifications.
After serving using polymer serve --open it is also working wrong:

• Clicking on 'show private API' reveals an empty properties section. However, this element contains one property:

prop1: { type: String, value: 'my-element' }

• Also when you click on 'demo', you see the demo but 'docs' link gets disabled.

[vjlomocso]

I also tried polymer serve --open and it opens the component page but when I click the demo button I don't see the demo. I didn't change the code from the template so it should show _Hello my-el_ but it doesn't

[MeTaNoV]

Same here after my first attempt to use 2.0. Needless to say that if the basic is not working, one might wonder about the rest. Waiting a bit more is not a problem if the waiting is then worth it! Looking forward a working minimal template 2.0 element with polymer-cli.

[FredKSchott]

Thanks for your patience everyone as we test the release candidate and get ready for the general release. I'll be looking into this issue and one or two others tonight/tomorrow, should have a fix for you asap.

[fooloomanzoo]

polymer serve or polymer serve --open doesn't work on neither starter-kit, element nor app. Only if you would copy the content in a seperate folder in bower_components and start a different server manually, the component page would be rendered, but not the demo. the iron-component-page itself is broken too, because the iframe-element, where the demo/index.html would be called, doesn't have a height.

[FredKSchott]

Hey everyone, just wanted to update that a fix has been submitted in #652 and will be available when we next update polymer-cli.

The problem most of you were seeing wasn't with Polymer 2.0, but instead our old 1.0 documentation-viewer was having trouble displaying 2.0 elements. For now we've changed it out for the demo/snippet viewer when you visit the polyserve URL, and we will soon update it again when our latest 2.0-ready documentation viewer is released.