【问题标题】：Angular 2+ Application ng buildAngular 2+ 应用程序构建
【发布时间】：2018-02-09 10:15:33
【问题描述】：

我创建了一个 Angular 2+ 前端应用程序，我试图在我公司的 sharepoint 网站上运行它。但是，当我构建我的项目并创建 dist 文件夹时，它不允许我获取 index.html 和 .js 文件并将它们放在共享驱动器中以启动应用程序。我需要帮助。是否有可能在构建之后在没有 Web 服务器的情况下启动应用程序？基本上只需启动 index.html 并让它工作吗？

我知道这与路由和基本 href 有关

angular chrome error

【问题讨论】：

您可以发布您的 index.html 内容吗？

标签： angular deployment

【解决方案1】：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emulator</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></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

【讨论】：

【解决方案2】：

尝试在 index.html 中更改而不是 base href="/"，在 index.html 中添加文件夹的名称，不要忘记结尾的“/”：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emulator</title>
  <base href="/<BaseFolder>/">

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

【讨论】：

【解决方案3】：

好建议，但仍然没有爱...仍然无法在控制台中加载资源。

【讨论】：

【解决方案4】：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emulator</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></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

我很欣赏这些想法。我能够将基本 href 更改得更高一点，以便现在可以识别 .js 文件，但现在在控制台中出现不同的错误，没有加载......不幸的是，这似乎与路由有关。

【讨论】：

afaik 那是您正在使用的浏览器的安全功能。试试我在第一个答案中作为编辑发布的解决方案。安装http-server：npm install -g http-server并运行编译页面：http-server dist -a 127.0.0.1

【解决方案5】：

我找到了一个简单的解决方案，所以这里是一个

编辑：

有一个 npm 包"http-server" 可以让你轻松地在本地运行一个 http 服务器。以下是如何安装和使用它：

全局安装 http-server
```
npm install -g http-server
```
要在 http://localhost:4201 上运行 dist 文件夹中的构建：
```
http-server dist -a 127.0.0.1 -p 4201
```

您也可以使用 XAMPP，但这远远超出了您的需要。但是，如果您不想使用 npm 包，还有一些方法如何使用 Windows 或 MacOS 的板载工具运行网络服务器，这在 Gist

中有所描述

GitHub 页面的替代方案

我也遇到了同样的问题并且无法解决它，即使在 stackoverflow 搜索了（老实说......）分钟之后。我找到了一些解决方案，但我无法让它运行。我所做的是使用GitHub Pages（您也可以使用 GitLab Pages 来创建私有存储库）。

构建

使用 GitHub 页面的 base-href 构建您的应用

ng build --prod --base-href "https://USER_NAME.github.io/REPOSITORY/"

推送到 GitHub

将您的构建作为 gh_pages 分支推送到 GitHub。如果你不是熟悉Git就可以使用非常好用的GitHub Desktop app
设置 GitHub 页面

到https://github.com/USER_NAME/REPOSITORY/settings 并设置您上传页面的分支（在我们的例子中为gh_pages）为 GitHub Pages 的来源

您可以使用Travis-CI 做更多事情。每次您将更新推送到存储库并将其推送到 GitHub Pages 时，Travis-CI 都可以构建您的项目。 GitLab 甚至有自己的持续集成。

【讨论】：