Search code examples
angularprogressive-web-appshttpserver

Cannot create Angular application http-server - Error: css and js files 404 Not found

I want to create a PWA but the http-server package doesn't work.

So I've created a default Angular-App with ng new myProject and then created the dist-folder with ng build --prod

Now all is set so I cd into the dist-folder and run the npm package http-server -o the first site opens and I click on the link but then I get a lot of error messages. The site remains blank (completely white), where there should be the Heroes-Demo of the Angular CLI.

[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /styles.3ff695c00d717f2d2a11.css" Error (404): "Not found"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /runtime-es2015.858f8dd898b75fe86926.js" Error (404): "Not found"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /polyfills-es2015.27661dfa98f6332c27dc.js" Error (404): "Not found"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /main-es2015.79588c7e85ca7a0dacf0.js" Error (404): "Not found"

So I've not even been able to get the site working, what might be the problem?

Here is the entire Log:

$ http-server -o
Starting up http-server, serving ./
Available on:
  http://159.144.42.198:8080
  http://192.168.34.113:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /styles.3ff695c00d717f2d2a11.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /runtime-es2015.858f8dd898b75fe86926.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /polyfills-es2015.27661dfa98f6332c27dc.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /main-es2015.79588c7e85ca7a0dacf0.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /styles.3ff695c00d717f2d2a11.css" Error (404): "Not found"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /runtime-es2015.858f8dd898b75fe86926.js" Error (404): "Not found"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /polyfills-es2015.27661dfa98f6332c27dc.js" Error (404): "Not found"
[Wed Jul 03 2019 10:37:24 GMT+0200 (Central European Summer Time)] "GET /main-es2015.79588c7e85ca7a0dacf0.js" Error (404): "Not found"
Solution

  • Because your angular app is an SPA, you need to reroute each request to the index.html.

    With http-server you can use the proxy parameter for it, for example:

    http-server --proxy http://localhost:8080?

    It's also mentioned in the http-server README.