http-server -p 8080 does not serve my angular application. Whereas ng serve does

Question

This is what I see when I open my localhost

I want to make a PWA with Angular so I followed the instructions on the angular.io website to the smallest detail yet it doesn't open the usual "Welcome to your app" page. What might be the problem?

I am have the following installed:

Angular CLI: 6.0.1
Node: 8.9.4
OS: linux x64
Angular: 6.0.1

This is what the console displays when i click on pwaApp and the browser directs me to blank page

What my be the problem? And how can I fix it? Thanks in advance

Answer 1

I am also facing this problem in Angular6 but it can be solved by following steps

1. Make a dist using ng build --prod
2. Then

cd dist
cd project_name
npx http-server

3. click any IP given after server starts, e.g. 127.0.0.1:8080

Answer 2

I found the solution. I had to build the app then cd into the dist and then cd (again) into the built app before http-server -p 8080. The tutorial i followed had just mentioned to cd into the dist and serve, so it wasn't very clear.

Answer 3

Seems you dist folder is empty. Please double check and make sure your build succeed.lite-server Thats what I use often to run my angular app. Take a look at this link https://github.com/angular/angular-cli/wiki/stories-disk-serve. The is that even if you use http-server when you reload the page it will show up a 404 error. Page not found. Best solution is using lite-server.

npm i lite-server -g

Then cd inside the root path of your application and run

lite-server --baseDir="dist"

Your app will run over port 3000 by default. If you want to run it on a different port so take a look at this answer https://stackoverflow.com/a/35517817/6261137