24

(I'm new on planet Angular2 (emigrated from dying planet
Flex/Actionscript, so please forgive this naive question)

Have I made a fatal error in thinking that after running the "ng build" command on my project from Angular CLi, I would end up with a functioning project in the directory "dist" – which I could just run in a browser, put up on a server?

I end up with a folder full of correctly named stuff, etc. Is there a step I am missing here?

enter image description here

Zze
  • 16,928
  • 11
  • 80
  • 110
spring
  • 17,373
  • 15
  • 75
  • 154
  • 2
    You're not misunderstanding. You should be able to dump the contents of the `dist` folder into your web server of choice and have a working site. – Justin Niessner Jun 01 '16 at 02:58
  • If you want to spin up the development server to run the site locally, you should use `ng serve` instead of `ng build`. – Justin Niessner Jun 01 '16 at 03:00
  • 1
    I haven't looked at everything in `index.html` but I'm guessing it won't load properly simply from the filesystem so yes, you'll need a server for the production application. – Justin Niessner Jun 01 '16 at 03:17
  • you can produce fully production app via `ng build -prod`. For testing you can run `ng serve -prod` command and open app in localhost:4200 – Rakhat Jun 05 '16 at 03:43

3 Answers3

70

I'm new to angular, and just ran into the same issue. You can open up and run the Index.html file in the browser directly from the file system, but you have to edit the path of the base href attribute in Index.html from:

<base href="/">

to:

<base href="./">
user6927497
  • 716
  • 6
  • 4
  • 1
    Must we keep or delete this when deploying to a real server? Probably it should be noticed to angular 2 dev team – realtebo Oct 28 '16 at 11:23
  • 2
    Might it be that this "bug" is only existent on a Linux system? Just trying to troubleshoot. – phil294 Dec 15 '16 at 02:50
  • Latest macOSsierra system at this time. This fixed it for me in localhost:4200 and live production server (Apache). This answer ended my very long search. Thank you!!! Also @realtebo I completely agree this should be brought to angular-cli dev team! – totallytotallyamazing Apr 19 '17 at 05:14
  • Just notified angular-cli dev team https://github.com/angular/angular-cli/issues/6006 – totallytotallyamazing Apr 19 '17 at 05:33
  • 3
    Thanks. The above worked for me on windows. I also attempted `ng build --base-href="./" ` and I didn't need to change it afterwards. – Dean May 10 '17 at 18:32
8

I thought I would cross post my answer from a similar question. Original Post.
I don't think the OP is a duplicate, so here;

You can achieve the desired outcome with the following cmd angular-cli command:

ng build --base-href /myUrl/

ng build --bh /myUrl/ or ng build --prod --bh /myUrl/

This changes the <base href="/"> to <base href="/myUrl/"> in the built version only which was perfect for our change in environment between development and production. The best part was no code base requires changing using this method.

To summarise, leave your index.html base href as: <base href="/"> then run ng build --bh ./ in angular-cli to make it a relative path, or replace the ./ with whatever you require.

This is the official angular-cli documentation referring to usage.

Zze
  • 16,928
  • 11
  • 80
  • 110
1

You need to run this in the CLI:

# This will create a production version in "dist" folder
ng build --prod

# This will create a production version in a custom folder
ng build --prod --output-path=custom
Tiago Martins Peres
  • 12,598
  • 15
  • 77
  • 116
Marian Zburlea
  • 8,631
  • 4
  • 30
  • 37