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

score 6 · Answer 1 · edited Jun 28 '19 at 06:29

6

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

Make a dist using ng build --prod
Then

cd dist
cd project_name
npx http-server

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

edited Jun 28 '19 at 06:29

participant

2,923
2
23
40

answered Jun 28 '19 at 05:27

nitasha

61
1
3

score 5 · Accepted Answer · answered May 13 '18 at 22:33

5

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.

answered May 13 '18 at 22:33

Captain A

191
1
2
11

I make this to make it work: 1. npm run ng build inside app main directory 2. cd dist, cd my_project_name 3. http-server -p 8080 inside my_project_name 4. open http://127.0.0.1:8080/ on the browser (or click the terminal) Angular v16, http-server V14.1.1 – Dev 200 Aug 24 '23 at 13:41

score 1 · Answer 3 · answered May 13 '18 at 18:38

1

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

answered May 13 '18 at 18:38

Ulrich Dohou

1,509
14
25

The dist folder is not empty, i successfully installed lite-server and when i run ' lite-server --baseDir="dist" ' localhost:3000 displays the following message: Cannot GET / – Captain A May 13 '18 at 19:55
It means you are having some issues with your build. Check your code. Make sure you have a default route. Can you show us your routing module ? – Ulrich Dohou May 13 '18 at 22:15

score 0 · Answer 4 · answered May 13 '18 at 16:10

0

it looks like you started your dev server in the parent folder.

Did you build your app successfully ?

answered May 13 '18 at 16:10

dc-p8

784
1
6
19

Yes i built it successfully. The 'ng serve' works fine. I started 'http-server -p 8080' in the dist folder – Captain A May 13 '18 at 18:11

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

4 Answers4