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 --prod, that generates the 'dist' folder. When I put that folder in xampp to run, it is not working. I found that there is no *.js files, which should be in there after *.ts -> *.js conversion (i suppose).

I have attached the screenshot, in which on left side it is showing the src folder having all .ts files, On middle it is showing the 'dist' folder and browser screenshot.

Please guide me how can I generate fully working app from angular-cli, which I can run in my xampp server.

Screenshot:

Answer 1

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 2

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.

Answer 3

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/