I have a working Polymer project when I have all my links pointing to the bower_components folder, however, when I change to node_modules I get the following message when I run
polymer serve
"Failed to load resource: the server responded with a status of 404 (Not Found)"
with the URL being:
http://127.0.0.1:8081/node_modules/#polymer/polymer/polymer.html
This is correct since the Polymer team changed polymer.html to polymer.js
However, where is this done and how can I use polymer using yarn (which saves in node_modules)?
Edit:
I think I found the culprit. When I tried to find iron-icons (mind the 's'), I could only find it on yarn which saves to node_modules. When I load the node module iron-icons I get the above-mentioned error message.
So I point to the bower_component iron-icon (mind you, no 's') but that doesn't provide the extensive library of icons I have with the yarn package:
on Yarn: https://yarnpkg.com/en/package/#polymer/iron-icons
but no such thing with Bower: https://bower.io/search/
Why?!
Related
I'm new to polymer. I've followed a couple of tutorials to learn the base of the library. However, I always encounter a problem after building the app.
Here is a summary how to reproduce my problem.
polymer --version //returns 1.6.0
mkdir poly-app
cd poly-app
polymer init // Select polymer-2-application
polymer serve --open // works fine
polymer build
polymer serve build/default --open // works fine
Now, I would like to export my code to my web server. I copy paste the content of /poly-app/build/default and I paste it on my web server. When I try to access it, it get errors such as:
Failed to load resource: the server responded with a status of 404 (Not Found)
I found that the problem comes from the following lines of code in /poly-app/build/default/index.html:
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/poly-app-app/poly-app-app.html">
In order to fix the problem, I need to remove the first / in the src and href attribute.
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="src/poly-app-app/poly-app-app.html">
Apparently I need to do this manually every time I build the app. Is there any other way to fix automatically?
Thanks a lot!
I believe you are trying to serve it from a non root path on your website?
In that case you should set the basePath property of the build configuration to the respective path and the generated code should populate the <base> tag with the needed information so the urls are working.
I learned to do a working environment based bower, from there install yoeman and gulp and materialize, I made a web page to root of all this, now I want to upload a host (like 000webhost or firebase) but I do not know which files are the ones I should upload
thx
You should upload everything except bower_components directory since it's content is used only when you compile down the things using gulp on your local machine. Once all your source files are piped through gulp, they are not required on the destination location. None of those files is or should be used during a http request.
I don't know exactly what is your project's structure, but because you specified what you use (bower, gulp) then I can deduct.
So after gulp finishes it's work, you have a public directory where all your combined, minified and copied assets live. This is obviously needed on the server, in your markup, you should refer to those files, not the ones fetched by bower when you've done bower install library1 --save. bower install library2 --save.
I have been facing issues with the polymer-cli since I installed it. I am not able to serve components during development. I have to write my own Node.js server with remapping urls to work with components. But the documentation page clearly suggests that it had already done this work with its own tool.
What I did
Create a component using polymer-cli's polymer init
Serve the component using polymer serve
The result is unexpected and caused the following errors:
Polymer version: 0.18.0-pre.15
Ubuntu 16.04.2 LTS x64
On running 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/test-element/
A) If I try to open localhost:8081
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)
B) If I try to open `localhost:8081/components/test-element/demo/
The url redirects to http://localhost:8081/home/user-name/project-root/test-element/
The index page in the project root directory is served.
GET http://localhost:8081/home/user-name/project-root/webcomponentsjs/webcomponents-loader.js
GET http://localhost:8081/home/user-name/project-root/iron-component-page/iron-component-page.html 404 (Not Found)
When i start gulp serve am facing following error
ReferenceError: Polymer is not defined
http://localhost:5000/elements/my-greeting/my-greeting.html:30
ReferenceError: Polymer is not defined
http://localhost:5000/elements/my-list/my-list.html:30
Here is code of my-greeting.
<script>
(function() {
'use strict';
Polymer({
is: 'my-greeting',
properties: {
greeting: {
type: String,
value: 'Welcome!',
notify: true
}
}
});
})();
</script>
You must include the reference to polymer in your list.html file:
<link rel="import" href="../bower_components/polymer/polymer.html">
Are you sure it was included?
Although I am serving through IIS, I was having the same kind of issues as you.
Error: Polymer is not defined
<unknown> at /GooglePolymer/starterKit/app/elements/my-greeting/my-greeting.html:30
<unknown> at /GooglePolymer/starterKit/app/elements/my-greeting/my-greeting.html:41
Chrome DevTools was throwing a 404, telling me It could not find the bower component polymer.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/GooglePolymer/starterKit/app/bower_components/polymer/polymer.html
For some reason I can not explain the link references in the files are not functioning correctly and not linking up enough levels to the bower_components. Hence not finding file.
Solution: I copied the bower_components folder into app and boom it worked. I hope this helps with your problem.
Import polymer.html in your custom element files.
Locate the .bowerrc file and be sure that the entry is pointing to the directory scaffold location where the bower components are residing.
Even if your code "links" to the exact location of the project bower components, the .bowerrc file overrides the directive [most importantly for Polymer]. In my case, the bowerrc file was claiming the bower components were located in the public [application, NOT project] directory.
A number of the Polymer examples offset the bower components by a sub-directory or two so that adding a bower component using npm results in a mismatch that can manifest itself as dual [dueling] bower component sources. For example, running a bower request such as npm install --save whatever always installs to the project directory regardless that the .bowerrc file points to the public directory.
Having said all that, placing the bower components in both the project directory, say firebaseTest, AND the application directory, say public [firebaseTest->public] fixed multiple bower component issues. And these were "Whack-a-Mole" type bugs in which one fix would cause a fix breaking other bug.
I was having "[paper-listbox::_flattenBehaviorsList]: behavior is null, check for missing or 404 import" issues that messed up a dropdown component.
It appears that the material components themselves have internal dependency reference issues meaning that some subset of material components need to be in the project directory and others in the application directory. I just dropped identical bower-component directories in both places for the short term.
I am very new to the concept of npm-install. Please throw some insights into where I might be going wrong. I have a .js file through which I am supposed to invoke a binary with some command line arguments.I did write package.json setting the main parameter to the javascript file and I am using preinstall script that compiles the code and creates a binary that is supposed to be used by my java script file.
Couple of questions:
How do I make package.json take this compiled binary as dependency for the js file?
npm install runs fine for me but I do not see any output folder whatsoever. I was hoping it would generate a .node_module in pwd and copy the contents onto bin/ folder in that. May be, I am missing something.
npm info prepublish test#0v.0.1
npm verb from cache <pwd>/package.json
npm verb readInstalled returning test#0.0.1
npm verb exit [ 0, true ]
npm info ok
Can someone please through some insights into this issue?
You don't have to include your binary file in package.json. If you're using Express, put it in the node-modules folder within the parent directory. Otherwise, you can either specify the whole path to the file where you call it or put the file in the parent directory. For global installations, the node-modules folder is usually created at: C:\Users\[Username]\AppData\Roaming\npm\node_modules.
I figured out a way to handle it. Using a js module and using my node as required in that module causes npm to setup my node in node_modules/ folder. I used a pre-install shell script to compile my binary and used the relative path to use the binary upon execution.
Thanks for all who replied.