how to deploy angular2 app built using angular-cli

Question

I have created n new angular app using angular-cli.

I completed the app and preview it using ng-serve, it is working perfectly.

After that I used ng build --

Answer 1

Use ng build with the --bh flag

Sets base tag href to /myUrl/ in your index.html:

ng build --base-href /myUrl/
ng build --bh /myUrl/

Answer 2

http-server doesn't support client-side routing, so nothing other than your base URL is going to work. Instead, you can use angular-http-server:

npm install -g angular-http-server
ng build --prod
cd dist
angular-http-server

This should only be used to test the app locally before deploying it on a Web server. To learn how to actually deploy the app on a Web server, check out the Angular.io article on deployment, which discusses considerations to make when building for deployment and provides configurations for a variety of different Web servers commonly used in production.

Answer 3

I am currently using Angular-CLI 1.0.0-beta.32.3

in the root directory of your project run npm install http-server -g

after successful installation run ng build --prod

upon successful build run http-server ./dist

Answer 4

Check your index.html file and edit this line

<base href="/[your-project-folder-name]/dist/"> 

Your content should load properly. You can then load styles globally

You should set base href as recommended by Johan

ng build --prod --bh /[your-project-folder-name]/dist/

Answer 5

method 1(popular one) : If you are using angular-cli, then

ng build --prod

will do the trick. Then you can copy everything from .dist folder to your server folder

method 2 :

you can use http-server to serve your app . To install http-server

npm install http-server -g

and after going to your project folder

http-server ./dist 

it will serve all the files in your folder. you can check the terminal what ip-address and port you can use to access the application. Now open up your browser and type

ip-adress:port/index.html

Hope it will help you :)

Bonus : If you want to deploy in heroku. Please go through this detailed tutorial https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

Answer 6

For anyone looking for an answer for IIS hosting...

Build your project

ng build --prod

Copy all contents of the ./dist folder into the root folder of your website maintaining the folder structure within ./dist (ie - don't move anything around). Using the Beta-18 version of the angular-cli all assets (images in my case) were copied to ./dist/assets during the build and were referenced correctly in their containing components.