How to serve an Angular 2 dist folder index.html

I'm using this angular 4 seed app: https://github.com/2sic/app-tutorial-angular4-hello-dnn

It uses webpack and works fine.

It only seems to serve the dev files and not the dist/ folder.

I want to ng serve the dist folder.

Not sure the command to do this or if I need to install a lite server or something.

I run this command to create the dist folder (which works fine):

g build --prod --aot --output-hashing=none

Now I want to run this build in the browser.

You can use http-server for doing so. First of all generate a build using the command ng build --prod --aot --output-hashing=none. This will create a dist folder in your directory structure.

After this, run http-server ./dist, which will start serving your project from dist folder.

Make sure you have installed http-server globally using

npm install http-server -g

For reference, see https://www.npmjs.com/package/http-server

At least for Angular apps, angular-http-server seems to be a nicer option.

First install it with your prefered package manager, say

npm install angular-http-server -g

or

yarn global add angular-http-server

Then execute it:

angular-http-server --path path/to/dist/folder

Look at the repo for more information about usage.

PS: According the author, it should also work with other SPA frameworks (React, Vue and so forth).

PPS: Do not use angular-http-server for production, use this solution for testing purposes only.

You need a server to serve your generated build.

I am using http-server. Install http-server using:

npm install -g http-server

now go inside your dist folder and run this command

http-server

as shown here:

[![enter image description here][1]][1]

Check http://localhost:8080 in your browser [1]: https://i.stack.imgur.com/RQT9J.png

A little tips

so you avoid to install globally

install in your root

npm i http-server

in your package.json

"scripts": {
    "pwa": "http-server ./dist"
  }

than

npm run pwa 

I serve the dist folder with the Angular CLI...

ng serve --prod=true

> When true, sets the build configuration to the production target. All builds make use of bundling and limited tree-shaking. A production build also runs limited dead code elimination.

https://angular.io/cli/serve

I use the VS Code extension Live Server.

1. Run your ng build which will output the dist/ folder with index.html
2. Open separate instance of VS Code onto the dist/ folder
3. Press "Go Live" button in bottom right of VS Code status bar which you will see after installing the Live Server extension.

I tried with http-server by installing it globally

npm install -g http-server

then moved to the dist/project-folder and tried with

http-server -o

output in console

[Fri Sep 13 2019 15:19:57 GMT+0530 (India Standard Time)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132
Safari/537.36"

Then this solution worked with all the steps same but instead of using http-server try angular-http-server

It worked for me.

You don't need to install anything, Just use the following command.

npx lite-server --baseDir="dist/"

ng serve will work as normal, and it doesn't require a prior build. It generates files in memory, and has some additional features like auto reload.

Install this globally (or locally)

npm i -g lite-server

Run this command (replace project-name)

lite-server --baseDir="dist/project-name"