title: Angular 2 application deployment in production server
body: <p>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- </p>
  
  <p><a href="https://i.stack.imgur.com/uRdOX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uRdOX.png" alt="enter image description here"></a></p>
  
  <p>And here is my index.html under dist folder </p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;BB&lt;/title&gt;
    &lt;base href="/"&gt; 
    &lt;link rel="stylesheet" type="text/css" href="assets/source/stable/layout-default.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="assets/demos/css/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="assets/demos/bootstrap/css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/demos/dist/css/AdminLTE.css"&gt;
    &lt;link rel="stylesheet" href="assets/demos/dist/css/skins/_all-skins.css"&gt;
    &lt;link rel="stylesheet" href="assets/customs.css"&gt;
    &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/js/js-library/jstree/themes/default/style.css" /&gt;
    &lt;link rel="stylesheet" href="assets/demos/css/dc.css"&gt;
    &lt;script src="/vendor/jquery/dist/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="assets/js/js-library/jstree/jstree.js"&gt;&lt;/script&gt;
    &lt;script src=" https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/source/stable/callbacks/jquery.layout.resizePaneAccordions.js"&gt;&lt;/script&gt;
    &lt;script src="assets/demos/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/demos/js/adminlte/app.js"&gt;&lt;/script&gt;
    &lt;script src="assets/demos/js/adminlte/demo.js"&gt;&lt;/script&gt;
    &lt;script src="assets/datatables/jquery.dataTables.js"&gt;&lt;/script&gt;
    &lt;script src="assets/datatables/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="assets/query-builder/css/query-builder.default.css" id="qb-theme"&gt;
    &lt;link href="http://querybuilder.js.org/dist/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet"&gt;
    &lt;script src="assets/bootstrap-select/dist/js/bootstrap-select.js"&gt;&lt;/script&gt;
    &lt;link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet"&gt;
    &lt;script src="assets/selectize/dist/js/standalone/selectize.js"&gt;&lt;/script&gt;
    &lt;script src="assets/bootbox/bootbox.js"&gt;&lt;/script&gt;
    &lt;script src="assets/jquery-extendext/jQuery.extendext.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/doT/doT.js"&gt;&lt;/script&gt;
    &lt;script src="assets/moment/min/moment.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
    &lt;link href="assets/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet"&gt;
    &lt;script src="assets/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"&gt;&lt;/script&gt;
    &lt;link href="assets/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"&gt;
    &lt;link href="assets/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet"&gt;
    &lt;script src="assets/bootstrap-select/dist/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/query-builder/query-builder.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/js/d3.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/js/crossfilter.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/js/dc.js"&gt;&lt;/script&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt; 
    &lt;script src="vendor/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
    &lt;script src="vendor/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="vendor/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="vendor/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('system-config.js').then(function() {
        System.import('main');
      }).catch(console.error.bind(console));
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;bais-app&gt;Loading...&lt;/bais-app&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But whenever I try to </p>
  
  <pre><code>ng serve
  </code></pre>
  
  <p>Everytime It shows me this error</p>
  
  <pre><code>Error: Attempting to watch missing directory: typings
  </code></pre>
  
  <p>But where is typings folder is there in node_modules folder</p>
  
  <p><a href="https://i.stack.imgur.com/kbzQU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kbzQU.png" alt="enter image description here"></a></p>