Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 970
AngularM Avatar asked Apr 13 '17 10:04

AngularM


People also ask

How do I run a directory in angular 13?

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.

What are the contents of dist folder in angular?

The dist folder is the build folder which contains all the files and folders which can be hosted in the server. The dist folder contains the compiled code of your angular application in the format of JavaScript and also the required HTML and CSS files.

Does ng serve use Dist?

The problem here is that ng serve doesn't produce dist directory that wordpress requires. To sum up, the theme environment requires two things: live reload. dist folder.


1 Answers

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

like image 183
Noor Ahmed Avatar answered Sep 28 '22 04:09

Noor Ahmed