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
3 answers
solution1
3 ACCPTED 2016-06-07 10:12:21
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
solution2
0 2016-06-20 02:38:44
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.
solution3
0 2019-05-06 09:47:05
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 (ie /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 (ie /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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.