29

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

C:\Source\angular> ng build

enter image description here

cut and past the dist folder in another directory 

C:\ReSource\angularbuild

enter image description here

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.

Improve this question

4 Answers 4

Reset to default
47

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

20

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.

Improve this answer

6 Comments

If you deploy the angular4 dist directory on you webserver to /test, then you can build it as follows:
can dist folders content like main.xxxxxxxxxxxxxxx.js can be edited?
Yes you can , but you should not :) @T.Shashwat
actually I tried editing my main.XXXXXXX.js but in vain as files are compressed and will not catch up with changes you do. so instead I tried working on my source code and again build the project and after that I just re-named main.xxxxxxxx.js to my previous file(main.xxxxxxxxx.js) available in my shared hosting provider(Hosgator). and I can see the changes reflected in my live website.
Angular 6 here. Mine did not launch the project. I double clicked index.html but I get in console lots of Failed to load resource: net::ERR_FILE_NOT_FOUND for favicon, my runtime and polyfills JS files, etc...
|
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.

Improve this answer

1 Comment

Indeed, so don't forget the --prod flag for production people. Thanks for sharing.
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.

Improve this answer

1 Comment

This is awesome, thanks! In my case I had to use npx serve dist

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.