I am building the application in Angular6+
, now I ran the command ng build --prod
which gave me a dist folder. How do I check or serve that folder on Localhost?
-
1Generally, you can install locally any HTTP server which will serve your project distribution files, for example [XAMP, npm package "http-server", ....]– Ahmed NabilAug 8, 2020 at 22:23
5 Answers
You can do that using http-server package.
First install the package globally
npm install http-server -g
Then inside your project directory(in the terminal) just run
http-server dist/
And if you are using Angular 6+ or above (Working with Angular 10), You have to run
http-server dist/your-project-name
Now you can visit http://localhost:8080 to view your application
-
1
-
9If you have
npm
> 5.2 installed then you can do the same as above without the global install by usingnpx
. E.g.npx http-server dist/
. That will download and run the binary each time you execute, so for a once off or infrequent usage it's pretty good. Should you use the package a lot or need if offline then follow the steps in the answer.– AshJul 2, 2018 at 4:55 -
3it does not work when i reload the browser after navigating to a route. Any suggestions ? Feb 25, 2019 at 11:36
-
6I am using angular 7.x.x in my application, when i am trying to run in 192.168.2.36:8080 or localhost:8080 ports Application is not running. and it is showing 'This page is not working..'. Please let me know if you have any suggestions. thanks in advance– SanthoshMay 22, 2019 at 7:59
-
2Same problem of @Santhosh, http-server gives a series of addresses where to find the app but none of them work...– UsrMay 22, 2019 at 8:13
Edit: Angular 12+: ng serve --configuration production
Since Angular 7 you can just do ng serve --prod=true
. Documentation: https://angular.io/cli/serve
I know the question asks about Angular 6 but Google got me here, so just for future reference.
In my case I did next:
Install http-server globally
npm install http-server -g
Then inside the project directory (in the terminal), I run
http-server dist/[your-project-name]
Now you can visit http://localhost:8080/index.html to view your application. But when I restart the browser page I have to add again /index.html into URL.
It works in Angular 7.x.x version.
From Terminal:
$ npm install http-server -g
From Angular Project Dir. Lets say your Angular project name is ngx.
$ ng build
$ http-server dist/ngx
Starting up http-server, serving dist/ngx
Available on:
http://127.0.0.1:8080
http://192.168.43.54:8080
Hit CTRL-C to stop the server
Enjoy!
windows platform
- Install wamp server -->
https://wampserver.en.softonic.com/ and start.
- your dist folder files copy to c:/wamp/www/(your project name)/
- And create .htaccess file redirect your index.html.
(http://www.htaccesstools.com/htaccess-faq/)
- Next run browser http://localhost/(your project name)
ubuntu platform
- Install lamp server -->
https://www.linode.com/docs/web-servers/lamp/install-lamp-stack-on-ubuntu-16-04/ and start.
- your dist folder files copy to /opt/lampp/htdocs/(your project name)/
- And create .htaccess file redirect your index.html.
(http://www.htaccesstools.com/htaccess-faq/)
- Next run browser http://localhost/(your project name)