When I use polymer init to create a polymer 2 element, I see that an /app directory is created. Is this expected? I'm being told by my team members that there should be no /app directory installed when creating a polymer 2 element.
I used npm install -g polymer-cli#next for the install. Also tried uninstalling and reinstalling again.
Any ideas are appreciated.
According to the docs this is not an expected behaviour.
This is not also a behaviour of the old version of the polymer-cli.
Can you please show your prompt result after running the command?
I found out that the issue was related to having a .bowerrc file in a parent directory. In there, the 'app' directory was specified. I simply had to remove the 'app' reference and when I ran bower install again bower_components were installed without the app directory.
Related
Question
I am following the "Build an App with App Toolbox" tutorial. I had an issue with step 3 "add some elements" where the view would not display once I try to add the paper-checkbox element.
After some trial and error, I discovered that there is an extra node_modules folder within the paper-checkbox folder. This caused the view to break and therefore not display (more on this below). Why does this happen and how can this be fixed?
Tutorial Link
https://www.polymer-project.org/3.0/start/toolbox/add-elements
Full Problem Details
I started the project using the command line interface, ran polymer init and chose polymer-3-starter-kit per the tutorial instructions. I ran the following command to install paper-checkbox:
npm install #polymer/paper-checkbox
Note that I get the following warning after I install the element:
npm WARN #babel/plugin-transform-classes#7.0.0-beta.35 requires a peer of #babel/core#7.0.0-beta.35 but none is installed. You must install peer dependencies yourself.
+ #polymer/paper-checkbox#3.0.0-pre.20
added 12 packages from 1 contributor and audited 13720 packages in 27.422s
found 46 vulnerabilities (25 low, 14 moderate, 5 high, 2 critical)
run npm audit fix to fix them, or npm audit for details
I checked my node_modules folder and I can see that paper-checkbox was installed.
So far when I load my-new-view it displays correctly, like this:
However, when I add the import statement inside my-new-view.js for the paper-checkbox element,
import '#polymer/paper-checkbox/paper-checkbox.js'; the view fails to display:
After some code comparison with another project, I see that the paper-checkbox folder does not match up (see screenshot below). It contains a duplicate node_modules folder, which contains a duplicate #polymer folder. This polymer folder contains font-robota and other modules that are already contained in the top polymer directory; even more duplicated content.
Furthermore, on inspecting the webpage, the console (on chrome) gives the following error:
Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Polymer (http://127.0.0.1:8081/node_modules/#polymer/polymer/lib/legacy/polymer-fn.js:43:18)
at http://127.0.0.1:8081/node_modules/#polymer/paper-checkbox/node_modules/#polymer/iron-meta/iron-meta.js:141:1
This error occurs due to the fact that there is duplicate content. To solve this, I simply deleted the node_modules folder within the checkbox element.
I also tried installing paper-input as well. paper-input requires iron-input. After running npm install #polymer/paper-input the same node_modules folder is installed within both the iron and paper input elements. I deleted these two folders and then the element finally works.
Why does npm do this? And how can I fix it?
Github Project Repo
https://github.com/starkindustries/my-first-polymer-app
Version Info
Git Version 2.17.1 (Apple Git-112)
NPM version 6.4.1
Node version v10.10.0
Polymer CLI version 1.8.0
Chrome Version 69.0.3497.100 (Official Build) (64-bit)
Did you run npm install #polymer/paper-checkbox from the project root? If you run npm install command from the root of papaer-checkbox folder, it would read it's dependency folder from it's package.json file and install them.
This is my first attempt at using a frontend package that uses Grunt/Bower.
I am specifically referring to a Wrapbootstrap theme.
I followed the instructions as follows:
npm install -g grunt-cli
npm install -g bower
npm install
bower install
I believe the process went fine. There were some deprecation warnings though.
What I ended up was with a file structure like this:
However, now I am lost as how to start.
The instructions says to do grunt live but it just opens up a blank page without anything on it. I opened every index.html in there but no luck.
Would really appreciate if you someone can set me on a path to realizing how to deal with the Grunt/Bower tools and how to troubleshoot this case.
Thank you.
I am using ubuntu 16.04. I have install polymer-cli npm install -g polymer-cli which is properly installed but when I enter command polymer server
it is throwing error that polymer:command not found.
To check if a package is globally installed you can take a look at the npm root folder.
npm root -g will show you the root folder
ls $(npm root -g) therefore lists all public installed packages.
If you do not find polymer-cli there then your global installation was not successful... if you find it there but you still can not use it you probably want to try to reinstall it.
For me the answer relied in the fact that the bin folder of node wasn't defined in PATH.
The fix for me was to add it to the export PATH= part in my .zshrc-file or, if you don't use ZSH, .bash_profile. To know what to add to this PATH export run npm bin -g. For me the output was /usr/local/Cellar/node/11.14.0_1/bin. After this I opened my .zshrc-file and added the :/usr/local/Cellar/node/11.14.0_1/bin to the PATH definition. Notice the : which distinguishes a new location.
export PATH="$PATH:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin:/usr/local/Cellar/node/11.14.0_1/bin"
Good luck!
If polymer-cli is globally installed successfully, change your path environment variable - add polymer.js' parent directory to it and polymer serve will work. You'll find polymer.js in .npm-global/bin
I want to view this demo of Polymerfire in my browser.
I expect to see the demo run in my browser. Instead, I see a blank page and the following console error.
console.log.error.message
GET http://localhost:8080/ 404 (Not Found)
Navigated to http://localhost:8080/
I used the following procedure:
I installed the Polymer-CLI multi-tool per the instructions found here.
I created a project using the Polymer Starter Kit (PSK).
I named the project my-app.
I installed the Github repo found here using the CLI:bower install ---save firebase/polymerfire
I opened the terminal and navigated to the app's root directory.
cd path/to/my-app
I ran the following Polymer-CLI command (per the instructions found here).polymer serve
What can I do to try and solve this so I can see the demo run in my browser?
The best way to run an elements demo is to check it out...
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
I have never tried to run the demos from a bower install'd folder but, the above method will work.
You also have to navigate to the correct localhost path:http://localhost:8080/components/polymerfire/demo/
So the complete procedure (from the command line) is:
First, install the polymer-cli per the instructions found here.
npm install -g bower
npm install -g polymer-cli
Then run the following.
shell.sh
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
open http://localhost:8080/components/polymerfire/demo/
I need to install bootstrap. So far I have done step 1 succesfully. I was able to install the grunt file but step two is giving me problems for days, and I do not want to spend a next day on it.
step 1: Install grunt-cli globally with npm install -g grunt-cli
step 2: Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.
Whenever I do npm install, I get npm can't find a package.json file in your current directory. Well I do not know how to get it to my current directory, at the comand prompt it is C:\Users\Crisp>. the bootstrap file is in this directory C:\Users\Crisp\bower_components\bootstrap. There you will see the package.json file.
I really do not know what to do! I have searched on this site for supposed answers but no one says how to change the directory or actually get it to work. There is nowhere I see how to change a directory or root director but everyone keeps saying change root directory I am not a tech man, I do not know. PLEASE I NEED HELP!
I think what you are looking for if you are following instructions in this link (http://getbootstrap.com/getting-started/) you can go to the root directory by command line:
cd bower_components
then
cd bootstrap
just in case, to determine your current directory just type pwd
good luck
#contactmzn