Question

我在angular2应用程序中使用angular-cli。现在我想在ubuntu 14.04 digitalocean服务器中部署我的应用程序。我从未在服务器中进行任何角度应用程序部署。部署方式或建议的方法是什么？目前我的项目结构如下 -

这是我在index文件夹下的index.html

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

但每当我尝试

时

ng serve

每次它都会向我显示此错误

Error: Attempting to watch missing directory: typings

但是node_modules文件夹中的typings文件夹在哪里

Answer 1

Angular不需要任何外部运行（它不依赖于某些服务器端渲染引擎，如ASP.NET需要在后台运行）。您可以拥有提供静态文件的服务器（角度需要的文件 - ＆gt; node_modules，index.html等）。要将文件移动到数字海洋机器，您只需使用git即可。这意味着没有真正的部署＆＃34;就像在IIS等上部署一样。

这就是为什么我们可以使用angular制作混合应用程序的原因，一切都在浏览器中完成（角度使用客户端的资源（他们的手机，平板电脑，个人电脑），而不是像使用服务器CPU的ASP.NET一样渲染页面。

当然如果你使用rest服务器，服务器需要在某个地方活着。如果他们在同一个域上就可以了，如果没有，你需要告诉服务器启用cors（跨域资源共享）

编辑：你甚至不必使用npm start ..你可以全局安装http-server节点模块，只需调用http-server .它就会提供你文件夹中的所有文件，包括index.html所以你将能够打开像ip-adress:port/index.html这样的应用程序（这里是npm链接，来自那个npmjs.com/package/http-server）。你也可以使用nodejs express来提供类似+ nginx的页面直接在ip地址上提供它，这样你就不需要记下url中的port和index.html部分了

Answer 2

我遇到了一个类似的问题，试图运行＆＃39; ng＆＃39;并获得了“＃”;不被视为内部或外部命令，可操作程序或批处理文件＆＃39;代替。我试过＆nbsp; npm install -g typings＆＃39;在项目根目录，它运行。

Answer 3

在生产环境中部署Angular 2/4/5应用程序的最简单方法之一是使用Nginx + ng构建，步骤如下：

假设您要在HOST：http://example.com和PORT：8080上部署角度应用程序注意-您的主机和端口可能会有所不同。

确保index.html头标记中包含<base href="/">。

首先，在计算机上转到您的角度仓库（即/ home / user / helloWorld）。
然后使用以下命令为生产服务器构建/ dist：

ng build --prod --base-href http://example.com:8080
现在将/ dist（即/ home / user / helloWorld / dist）文件夹从计算机的角度存储库复制到要托管生产服务器的远程计算机。

现在登录到您的远程服务器并添加以下nginx服务器配置。

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.

    }

}

现在重新启动nginx。
就是这样！现在，您可以通过http://example.com:8080

希望这会有所帮助。

生产服务器中的Angular 2应用程序部署

3 个答案: