在 FTP 服务器上部署 Angular2 站点答案

【问题标题】：Deploying Angular2 site on FTP server在 FTP 服务器上部署 Angular2 站点
【发布时间】：2017-04-06 21:02:42
【问题描述】：

我试图在我的投资组合网站上运行我的 angular2 网站，但是当我指向 index.html 文件时，我得到的只是正在加载...并且页面永远不会加载。我以前从未在线部署过 angular2 站点。我有什么遗漏吗？

【问题讨论】：

【解决方案1】：

如果您使用angular-cli，您可以使用命令ng build 创建构建，然后将位于dist/ 文件夹中的文件上传到您的FTP 服务器。

执行ng build后，您应该会在dist/文件夹中看到以下文件。

C:\temp\ng2_test\dist>dir
 Volume in drive C is OS
 Volume Serial Number is XXXX-XXXX

 Directory of C:\temp\ng2_test\dist

2016-11-24  10:50 AM    <DIR>          .
2016-11-24  10:50 AM    <DIR>          ..
2016-11-24  10:50 AM             5,430 favicon.ico
2016-11-24  10:50 AM               481 index.html
2016-11-24  10:50 AM             5,539 inline.bundle.js
2016-11-24  10:50 AM             5,600 inline.bundle.map
2016-11-24  10:50 AM         2,477,664 main.bundle.js
2016-11-24  10:50 AM         2,504,627 main.bundle.map
2016-11-24  10:50 AM            10,268 styles.bundle.js
2016-11-24  10:50 AM            13,940 styles.bundle.map
               8 File(s)      5,023,549 bytes
               2 Dir(s)  329,406,005,248 bytes free

版本

angular-cli: 1.0.0-beta.21
node: 7.2.0
os: win32 x64

dist/index.html的内容

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ng2Test</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

【讨论】：

我运行了 ng build（也尝试了 ng build -prod），它完成了将文件放入 dist 文件夹，但是当我将 dist 文件夹放在我的 ftp 服务器上并从我的站点打开页面时，我正在加载......它永远不会加载。我错过了什么步骤？在 ng build 之后我有什么需要做的吗？
我在回答中添加了更多信息。请检查您使用的版本是否相同，结果是否相同。
我刚刚发现了这个问题。我注意到找不到所有 ng 构建文件的文件都指向我的 ftp 服务器的根目录。 site.com/ngbuild 文件在这里（根据控制台错误）/ 虽然它们都真正位于 dist 所以在 ng 构建之后我进入 dist 文件夹中的 index.html 并将 dist/ 放在所有脚本 src 的前面，现在它正在渲染应用程序。不过，感谢您的输入，通过查看您在 index.html 中的文件路径，它仍然对我有所帮助

【解决方案2】：

您的 HTML 如下所示：

<html>
<head>
  <meta charset="utf-8">
  <title>User Demo with JSON</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

您没有加载任何 Angular 或 JS 文件。这就是应用无法运行的原因。

【讨论】：

我在 SO 中搜索了 deploy angular2 app 并找到了这个：stackoverflow.com/questions/35539622