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

If anyone is working with Nginx, then here is the complete solution:

Suppose you want to deploy your angular app at HOST: http://example.com and PORT: 8080 Note - HOST and PORT might be different in your case.

Make sure you have <base href="/"> in you index.html head tag.

1. Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.

2. Then build /dist for your production server using the following command:

   ng build --prod --base-href http://example.com:8080

3. Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.

4. Now login to your remote server and add following nginx server configuration.

   server {
   
       listen 8080;
   
       server_name http://example.com;
   
       root /path/to/your/dist/location;
   
       # eg. root /home/admin/helloWorld/dist
   
       index index.html index.htm;
   
       location / {
   
           try_files $uri $uri/ /index.html;
   
           # This will allow you to refresh page in your angular app. Which will not give error 404.
   
       }
   
   }
   

5. Now restart nginx.

6. That's it !! Now you can access your angular app at http://example.com:8080

Hope it will be helpful.

Answer 2

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 3

Here's an example with Heroku:

1. Create a Heroku account and install the CLI

2. Move the angular-cli dep to the dependencies in package.json (so that it gets installed when you push to Heroku.

3. Add a postinstall script that will run ng build when the code gets pushed to Heroku. Also add a start command for a Node server that will be created in the following step. This will place the static files for the app in a dist directory on the server and start the app afterward.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Create an Express server to serve the app.

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. Create a Heroku remote and push to depoy the app.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Here's a quick writeup I did that has more detail, including how to force requests to use HTTPS and how to handle PathLocationStrategy :)

Answer 4

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 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.