Tools: Basic new Polymer Element not working

[philipjmurphy]

After creating a new element called foo-x, I am getting a missing webcomponents-lite.js file (and others) after inspecting the web page in Chrome Dev Tools.

I'm using [email protected] both on Windows and Linux with the same result.

This is what I did and experienced:

(poly-minimal starts off as an empty folder)

`
C:\Users\xxx\OneDrive\Documents\poly-minimal>polymer init
? Which starter template would you like to use? element
info: Running template element...
? Element name foo-x
? Brief description of the element
create bower.json
create demo\index.html
create index.html
create README.md
create foo-x.html
create testfoo-x_test.html

Project generated!
Installing dependencies...
`
In the generated README.md it states to view your application run the following:

$ polymer serve

C:\Users\xxx\OneDrive\Documents\poly-minimal>polymer serve info: Files in this directory are available under the following URLs applications: http://127.0.0.1:8081 reusable components: http://127.0.0.1:8081/components/foo-x/

Going to http://127.0.0.1:8081 and inspecting the web page I can see the following errors in the console:

GET http://127.0.0.1:8081/webcomponentsjs/webcomponents-lite.js 127.0.0.1/:11 GET http://127.0.0.1:8081/iron-component-page/iron-component-page.html 404 (Not Found)

Two 404's - not a good start for a newbie :-(

Going to http://127.0.0.1:8081/components/foo-x/ works with docs and demo, however, I still haven't figured out where the components/foo-x folder is (a bit of magic - might be nice to give some explanation in README.md or docs)?

I can hack my way out of this, but would be nice for this v. basic stuff to just work out of the box.

BTW, lint fails straight away too.

C:\Users\xxx\OneDrive\Documents\poly-minimal>polymer lint ERROR finding C:\Users\xxx\OneDrive\Documents\poly-minimal\webcomponentsjs\webcomponents-lite.js Error: ENOENT: no such file or directory, open 'C:\Users\xxx\OneDrive\Documents\poly-minimal\webcomponentsjs\webcomponents-lite.js' at Error (native)

Trying to build I get the following:

C:\Users\xxx\OneDrive\Documents\poly-minimal>polymer build info: Preparing build... info: Building application... error: In index.html: [could-not-load] - Unable to load import: file path is not in root: C:\Users\xxx\OneDrive\Documents\webcomponentsjs\webcomponents-lite.js (C:\Users\xxx\OneDrive\Documents\poly-minimal) error: In index.html: [could-not-load] - Unable to load import: file path is not in root: C:\Users\xxx\OneDrive\Documents\iron-component-page\iron-component-page.html (C:\Users\xxx\OneDrive\Documents\poly-minimal) error: Promise rejection: Error: 2 error(s) occurred during build. error: Error: 2 error(s) occurred during build.

P.S. Why does bower install so much when just creating a very simple element (170 folders in bower_components) ? Is there a command-line switch to just install the bare minimum and add-as-you-go instead?

[philipjmurphy]

Looks like I might have been better starting with creating a blank application with polymer-cli to get closer to what I wanted.

The following documentation outlines the process:

https://www.polymer-project.org/1.0/docs/tools/polymer-cli#app

I've noted in this documentation that you shouldn't use the element project type to add to a current polymer project. This along with the other notes about the path issues with creating a standalone element may explain some of the issues I was having too.

For me, I think the problem was that I've only just noticed the above specific polymer-cli tool documentation, which is separated from the main documentation. I saw the getting started guide which explains how to get up and running with the starter-kit. However, when I decided to move away from this I was using my intuition about how to create the bare minimum of a polymer project, however, the process is not quite intuitive where it does need the supportive documentation to get through it.

Might be nice if this gap can be shored up a bit for poor ol' newbies like myself.

I've noticed that there are 43 folders in the bower_components folder now, which seems a lot more reasonable for a bare bones application :)

[FredKSchott]

@philipjmurphy thanks for sharing the feedback. Here's a scattershot of answers:

• Running bower install also installs dev/testing dependencies. Those probably make up a good number of the dependencies you're seeing in your bower_components folder
• You should use the "for components" url to serve components, and the "for applications" url to serve applications. Agreed that this should be more clear, but we don't have a good signal for which one your project is yet.
• Yes components/foo-x is a bit of magic, but there are some good reasons for why it does this. An explanation in the README may help.
• Agree overall that there are some tricky bits to learn getting started on your own, I'd love to see us improve our documentation around all of this.