1

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

在此处输入图像描述

这是我在 dist 文件夹下的 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 文件夹中的打字文件夹在哪里

在此处输入图像描述

4

3 回答 3

3

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

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

当然，如果您使用休息服务器，该服务器需要在某处处于活动状态。如果他们在同一个域上没关系，如果不是，你需要告诉服务器启用cors（跨域资源共享）

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

于 2016-06-07T10:12:21.847 回答
0

我在尝试运行 'ng serve' 时遇到了类似的问题，但结果却是 ''typings' is not known as an internal or external command, operable program or batch file'。我在项目根目录中尝试了“npm install -g typings”，它运行了。

于 2016-06-20T02:38:44.807 回答
0

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

假设您想在 HOST:http://example.com和 PORT: 部署您的 Angular 应用程序：8080 注意 - HOST 和 PORT 在您的情况下可能会有所不同。

确保你有<base href="/">index.html 头标签。

  1. 首先，转到您机器上的 Angular 存储库（即 /home/user/helloWorld）路径。

  2. 然后使用以下命令为您的生产服务器构建 /dist：

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

  3. 现在将 /dist（即 /home/user/helloWorld/dist）文件夹从您机器的 Angular 存储库复制到您要托管生产服务器的远程机器上。

  4. 现在登录到您的远程服务器并添加以下 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.

    }

}

  5. 现在重启nginx。

  6. 而已 ！！现在您可以在http://example.com:8080访问您的 Angular 应用程序

希望它会有所帮助。

于 2019-05-06T09:47:05.257 回答