Angular 2 application deployment in production server

Question

I am using angular-cli for my angular2 application. Now I want to deploy my application in ubuntu 14.04 digitalocean server. I have never done any angular application deployment in the server. What is the way around to deploy or any recommended way to do it ? Currently my project structure is like below-

And here is my index.html under dist folder

<html> <head> <meta charset="utf-8"> <title>BB</title> <base href="/"> <link rel="stylesheet" type="text/css" href="assets/source/stable/layout-default.css"> <link rel="stylesheet" type="text/css" href="assets/demos/css/jquery-ui.css"> <link rel="stylesheet" href="assets/demos/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/demos/dist/css/AdminLTE.css"> <link rel="stylesheet" href="assets/demos/dist/css/skins/_all-skins.css"> <link rel="stylesheet" href="assets/customs.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="assets/js/js-library/jstree/themes/default/style.css" /> <link rel="stylesheet" href="assets/demos/css/dc.css"> <script src="/vendor/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="assets/js/js-library/jstree/jstree.js"></script> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="assets/source/stable/callbacks/jquery.layout.resizePaneAccordions.js"></script> <script src="assets/demos/bootstrap/js/bootstrap.min.js"></script> <script src="assets/demos/js/adminlte/app.js"></script> <script src="assets/demos/js/adminlte/demo.js"></script> <script src="assets/datatables/jquery.dataTables.js"></script> <script src="assets/datatables/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="assets/query-builder/css/query-builder.default.css" id="qb-theme"> <link href="http://querybuilder.js.org/dist/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet"> <script src="assets/bootstrap-select/dist/js/bootstrap-select.js"></script> <link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet"> <script src="assets/selectize/dist/js/standalone/selectize.js"></script> <script src="assets/bootbox/bootbox.js"></script> <script src="assets/jquery-extendext/jQuery.extendext.min.js"></script> <script src="assets/doT/doT.js"></script> <script src="assets/moment/min/moment.min.js"></script> <script src="assets/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> <link href="assets/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet"> <script src="assets/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script> <link href="assets/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"> <link href="assets/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet"> <script src="assets/bootstrap-select/dist/js/bootstrap-select.min.js"></script> <script src="assets/query-builder/query-builder.js"></script> <script type="text/javascript" src="assets/js/d3.js"></script> <script type="text/javascript" src="assets/js/crossfilter.js"></script> <script type="text/javascript" src="assets/js/dc.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script src="vendor/es6-shim/es6-shim.js"></script> <script src="vendor/reflect-metadata/Reflect.js"></script> <script src="vendor/systemjs/dist/system.src.js"></script> <script src="vendor/zone.js/dist/zone.js"></script> <script> System.import('system-config.js').then(function() { System.import('main'); }).catch(console.error.bind(console)); </script> </head> <body> <bais-app>Loading...</bais-app> </body> </html>

But whenever I try to

ng serve

Everytime It shows me this error

Error: Attempting to watch missing directory: typings

But where is typings folder is there in node_modules folder

do you have bitbucket or git setup on your prod environment? — unixmiah
– unixmiah, Commented Jun 20, 2016 at 4:07

Denko Mancheski · Accepted Answer · 2016-06-08 09:29:50Z

Angular does not need anything external to run (It is not dependent on some server side rendering engine like ASP.NET that needs to be running in background). You can have server that serves static files (the files that angular needs -> node_modules, index.html, etc..). And to move the files to the digital ocean machine you can just use git. Which means there isnt a real "deployment" like deploying on IIS etc..

Thats the reason why we can make hybrid apps with angular, everything is done in the browser (angular is using the client's resources (their phone, tablet, pc) instead of like ASP.NET using your server CPU to render page.

Of course if you use rest server that server needs to be alive somewhere. If they are on the same domain its okay, if not, you need to tell the server to enable cors (Cross-Origin Resource Sharing)

Edit: You dont even have to use npm start.. you can install the http-server node module globally and just call http-server . and it will serve all the files in your folder including that index.html so you will be able to open the app like ip-adress:port/index.html (here is npm link from that one npmjs.com/package/http-server). Also you can use nodejs express to serve the page like that + nginx to serve it directly on the ip adress so you will not need to write down the port and index.html part in the url

Is that mean , after moving the folder inside digitalocean npm start will run the application ? I updated my question with my dist/index.html
You dont even have to use npm start.. you can install this http-server node module globally and just call http-server . and it will serve all the files in your folder including that index.html so you will be able to open the app like ip-adress:port/index.html (here is npm link from that one npmjs.com/package/http-server). Also you can use nodejs express to serve the page like that + nginx to serve it directly on the ip adress so you will not need to write down the port and index.html part in the url
Of course before doing this you should npm install the modules and compile typescript if needed
well I am able to run the project but right now I am having some "typings dependency " problem. I am trying to fix that problem. Do you know anything about it ? Anyway Can you please update the answer , so that I can accept it :)
I updated it :) if you can give me more details maybe i can help

Treefish Zhang · Accepted Answer · 2016-06-20 02:38:44Z

I ran into a similar problem trying to run 'ng serve' and got ''typings' is not recognized as an internal or external command, operable program or batch file' instead. I tried 'npm install -g typings' at the project root directory and it ran.

viks · Accepted Answer · 2019-05-06 09:47:05Z

One of the simplest way of deploying Angular 2/4/5 application on a production environment is using Nginx + ng build, Here are the steps:

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.

Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.
Then build /dist for your production server using the following command:

ng build --prod --base-href http://example.com:8080
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.

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

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

Hope it will be helpful.

Collectives™ on Stack Overflow

Angular 2 application deployment in production server

3 Answers 3

6 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Related