angular-cli#webpack with primeng 404 issues - node.js

I get the following errors in a starter project with angular2, angular-cli#webpack and primeng. The only ui component from PrimeNG is a dropdown which renders and it has its values but no css theme is applied ever.(see errors below in regards to CSS). I am not sure why I get this error and have spent countless hours with no result so I am at a loss at this point. Component was generated with ng command and ng serve runs the web server. Anybody any idea? I also have tried both node.js 6.5.0 and 4.5.0 (switching and managing them with nvm).
Any help is appreciated deeply.
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/node_modules/primeng/resources/primeng.min.css
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/src/app/resources/css/font-awesome-4.6.3/css/font-awesome.min.css
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/node_modules/primeui/primeui-ng-all.min.css
Failed to load resource: the server responded with a status of 404
By the way now I posted the code in: https://github.com/GregHila/primeng-angular-cli.

Under the src/ there should be a file styles.css. I think you can import the styles here.
Eg.:
#import '../node_modules/primeng/resources/primeng.min.css';
The other way is to mention them in the angular-cli.json file in the styles array.

If you are using the webpack branch, then node_modules will not exist in the served directory. You will have to import the libraries you want to use, which will cause webpack to bundle them for you. Alternatively modify apps[0].scripts and apps[0].styles properties of angular-cli.json like in https://github.com/angular/angular-cli#global-library-installation.

Seems like 1.0.0-beta.11-webpack.9-4 has also fixed the bug

Related

Angular routing after ng build

I'm getting an error: "Cannot GET /main" when I access this address: "http://localhost/main"
I attach pictures of my code after ng build
I moved the created folder (named client) after ng build to the server
I hope you can help me
Thank you my code
I think your express server is not redirecting to your index.html.
You can also use the routing with hash.
More details can be found here
Angular static Base URl and routing with useHash=True
Could you share a picture of the main.component.ts please. The error occurs because it cannot find Maincomponent
I reckon the error comes because you have mispelt the main.components export.

Failed to load resource: the server responded with a status of 404 (Not Found) Express

This file contain the file structure
This file contains the directory settings
While trying to add static images to the home.ejs folder i am constantly getting this error:-
Failed to load resource: the server responded with a status of 404 (Not Found)
I tried to use the app.use(express.static('public')) but the issue still persist.
This is the path i used:
assets/img/hero.jpg
I cannot figure out how to solve this issue and is there is something wrong with file structure or i made mistake while referencing the file name.
First we need to set the path
app.set('/views',path.join(__dirname,'/views'))
then we can use image by using this path:
img/hero.jpg

My local server can't find bower files when I run my application

i have to run an application from a local repo (called exoplanet-explorer). I installed Node.js and Git, and I followed these steps:
in the command line of Git Bash:
git clone https://github.com/udacity/exoplanet.explorer.git
cd exoplanet-explorer
npm install -g gulp bower
npm install && bower install
gulp serve
When I run gulp serve, the app page opens but it's blank. In the console this list of errors appears:
Failed to load resource: the server responded with a status of 404 (Not Found) webcomponents-lite.js:1
(index):1 Refused to execute script from 'http://localhost:5000/bower_components/webcomponentsjs/webcomponents-lite.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
:5000/bower_components/iron-flex-layout/classes/iron-flex-layout.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:5000/bower_components/iron-pages/iron-pages.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:5000/bower_components/iron-selector/iron-selector.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:5000/bower_components/paper-material/paper-material.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:5000/bower_components/paper-menu/paper-menu.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:5000/bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:5000/bower_components/paper-styles/paper-styles-classes.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:5000/bower_components/paper-toolbar/paper-toolbar.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
[Deprecation] Styling master document from stylesheets defined in HTML Imports is deprecated, and is planned to be removed in M67, around May 2018. Please refer to for possible migration paths.
page.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
(index):1 Refused to execute script from
'http://localhost:5000/bower_components/page/page.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
:5000/bower_components/polymer/polymer.html:1 Failed to load resource: the server responded with a status of 404 (Not Found)
planet-thumb.html:78 Uncaught ReferenceError: Polymer is not defined
at planet-thumb.html:78
at planet-thumb.html:100
scale-visualizer.html:68 Uncaught ReferenceError: Polymer is not defined
at scale-visualizer.html:68
at scale-visualizer.html:189
What can I do?
I am working on the same project and I had the exact same issues, using Windows 10 Home, git version 2.15.1.windows.2 and node v8.11.3, npm v6.1.0, bower v1.8.4, gulp v3.9.1. I looked to where the bower_components folder is supposed to be located and there is absolutely nothing there. I also opened bash as administrator to install.
screenshot of my errors when I first load the page
screenshot of my errors when I refresh the page
If you are having these errors, bower is NOT installing the polymer-starter-kit properly for whatever reason or you forgot/failed to install it yourself. I actually watched my installs fail, as over and over i would install, type "bower list" and it would tell me the polymer files in the starter kit that I needed, were still not installed - but I just saw the files install.
bower list shows the files still NOT being saved to the project
So I had to do a "bower install -f polymer-starter-kit" after i did this and then installed gulp and typed gulp serve everything worked perfectly. Hope this helps someone else - I just spent over 16 hours yesterday and 5 today trying to figure this out. NOTE: you might want to do a "bower cache clean" first.
bower install -f polymer-starter-kit
Errors resolved!!!

"Failed to load resource: net::ERR_CONNECTION_REFUSED" for assets, css, app.js and vendor.js in production (react, babel, webpack)

I am setting up a copy of steemit cllient from https://github.com/steemit/steemit.com.
everything works in development environment but when I try to run same in production following steps provided in github repo, it gives error in console : "Failed to load resource: net::ERR_CONNECTION_REFUSED"
I am unable to relate this issue to anything. I am relatively new to webpack. Any help will be appreciated.
fixed it by removing "content="upgrade-insecure-requests" from server-html.jsx so that i can test production on local. it's useful for production. if anyone wants to look into it, i found details here: https://googlechrome.github.io/samples/csp-upgrade-insecure-requests/

node.js website deployed to Azure - 404 failed to load a .json resource

I have a node.js Web App in Azure,
the site loads the index.html, the css, images, etc. but the JS search functionality doesn't initialize,
I did an F12 inspection in Chrome and saw this error
[domain].azurewebsites.net/data/policies.json Failed to load resource: the server responded with a status of 404 (Not Found)
in the Azure console I can see the file list
> cd public
D:\home\site\wwwroot\public
> cd data
D:\home\site\wwwroot\public\data
> ls
D:\home\site\wwwroot\public\data
policies.json
according to the folder/file structure (everything is in the /public folder) I have made a configuration change as follows
/ = "site/webroot/public"
the folders are laid out like this
/public/index.html
/public/data
/public/js
/public/css
etc
Without the config setting the website doesn't see /public as the root folder, so it doesn't find the index.html and nothing loads.
So the site loads, which is great,
the images and css load, which is great
but it says it can't find the .json file in the data folder?
(and using the console the file is definitely there!)
please advise.
You need to set the JSON MIME type in web.config
This link explains how to fix it:
http://blogs.msdn.com/b/africaapps/archive/2013/06/07/how-to-serve-static-json-files-from-a-windows-azure-website.aspx

Resources