Angular 2 CLI - How to use /dist folder files created by angular-cli ng build

Question

I'm generating dist folder after ng build and my directory looks like

C:\Source\angular> ng build

cut and past the dist folder in another directory

C:\ReSource\angularbuild

After changing in Index.html to

<base href="./ReSource/angularbuild/dist">

Then

C:\Source\angular> ng serve

Getting inline.bundle.js,main.bundle.js,styles.bundle.js,vendor.bundle.js,main.bundle.js 404 not found errors

How could i achieve it ? I want to run the dist folder which is placed in angularbuild folder from C:\Source\angular>

Let me know the right way to do it.

Answer 1

Steps to create build is

> ng build --prod // can be other environment

To serve /dist folder created by angular-cli ng build command we can use "serve" use below command to install serve

> yarn global add serve

and run

serve dist/

You will get url and try it on any browser.

Answer 2

After ng build, it just needs a server to execute it, instead of ng serve you can install an http-server from your terminal npm i -g http-server --save then execute your project from the dist folder using the command (y) :

http-server ./dist

Or on apache for who are using Wamp or Xamp for example just copy the entire files on the dist folder inside your www folder, then restart Apache service

Answer 3

If you deploy the angular4 project on you webserver to sub folder DOCUMENT_ROOT/test, then you can do the build as follows:

ng build --prod --base-href "/test/".

Copy the dist/* files to DOCUMENT_ROOT/test.

Access the app through: http://myserver/test. That worked for me.

Answer 4

Dist folder is not for ng serve

It's a build that you can run without ng commands

ng build :

It creates the build of your project , converts all your ".ts files" and other files to the simple js files that browser can understand.

So there is no need to run ng serve over the dist folder ,

just open index.html file inside dist folder and your whole project will run.