构建后无法在本地执行 Angular 应用程序答案

【问题标题】：Not able to execute Angular application locally after build构建后无法在本地执行 Angular 应用程序
【发布时间】：2018-01-16 02:28:35
【问题描述】：

我正在玩弄 Angular 的 CLI 工具。当我执行

服务

应用程序开始运行并且运行良好。现在，我想将它分发到万维网并尝试通过

构建它

ng build --verbose

这似乎有效，因为我没有看到任何错误或警告。但是，当我进入创建的 dist 目录并在 index.html 上执行 FF 时，我到达了一个空白页面。

检查源代码，我看到包含的包在那里，但是作为我的 Angular 应用程序入口点的标签 app-root 没有呈现给任何东西。包含的捆绑包列表如下（我尽量保持默认和标准）：

<body style="padding-top: 70px;">
  <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="scripts.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>

我假设在 main.bundle.js 中呈现内容所需的所有魔法都在 inline.bundle.js 和/或任何包括其他捆绑包。是这样吗？

由于我在控制台中没有看到任何错误，因此从 src 目录中提供它可以工作等等。我猜我忘记了一些需要打开或注释掉的相当简单的东西.谷歌搜索这样一个模糊的问题会导致一堆无用的信息。

我能做些什么呢？如何进行更深入的故障排除？

【问题讨论】：

“在 index.html 上执行 FF”是什么意思？
您是否检查了所有多个浏览器？我在 MicrosoftEdge 上遇到了同样的问题，它没有产生任何错误，但在 Chrome 捆绑包中没有发现错误会出现。
@echonax Ahem... 这意味着我运行 FF 并使用文件 index.html 的路径作为参数。我也尝试在地址字段中手动输入，但结果相同。还是我误解了你的问题？
@k11k2 我用过 FF、Cr 和 IE。结果相同。
您是否尝试在构建ng build 后打开 dist 文件夹中的 html 文件。它表现良好还是仍然空白页？

标签： angular build rendering angular-cli

【解决方案1】：

我在 index.html 中使用这个脚本而不是 <base href="/"> 来打开 dist 目录中的文件。我不确定它是否适合您，但可能会有所帮助。

<script>
    document.write('<base href="' + String(document.location).replace('index.html','') + '">')
    </script>

【讨论】：

实际上，这比从 Web 服务提供它更有效。这正是我想要的。现在，我唯一担心的是，当我准备好部署时，它可能会在以后搞砸事情。但这个问题在这里得到了正确的回答。
@AndyJ 部署后告诉我。想知道它是否会导致任何软糖。
据我所知没有。不过，还没有尝试过路由。此外，我通过使用document.write()suggesting 来避免违规，从而看到有关违规的警告。除此之外，没有。似乎没事。当然，虽然有点 hacky，但这不是您回答的问题的一部分。
目前我的本地项目包含节点文件、Oauth 角度认证、路由、HTTP 调用、多语言支持包都可以正常工作，但不知道部署后的行为。

【解决方案2】：

那是因为您没有为您的页面提供服务。你需要一个简单的网络服务器，比如Nginx。

但是，如果您真的想要这个，这是可能的，但没有路由。您应该执行以下操作：

在您的index.html 相对：<script type="text/javascript" src="./inline.bundle.js"></script> 中创建您的脚本路径
将 base href 设置为 dist 文件夹的位置：
使用 IE11 或 EDGE。 FF 和 Crome 会给你安全警告。

【讨论】：

好吧，我也可以使用 ng serve 并像这样服务它。问题是，如果我将文件上传到 Azure，我希望它们能够执行。而且我几乎不怀疑 MS 让我在那里安装/配置 Nginx... 对此有何建议？
ng serve 使用网络服务器，我相信它是 LiteServer。运行 ng serve --oat --prod 时，您会收到一些警告，例如：“不要使用 liteServer 作为您的生产服务器”。关于你 Azure 的东西，Azure 基本上不是一个网络服务器吗？无论如何，这里有足够多的关于 Azure 上的 Angular 部署的问题。

【解决方案3】：

我认为路由器无法弄清楚如何处理 file:// url。 Angular 做路线的方式有点令人不安。当您导航到一个路由时，它取决于提供默认文档 (index.html) 的 Web 服务器，然后它实质上会重写 URL 以考虑路由器内部处理的基础之后的任何内容。

简而言之，从实际的 Web 服务器提供服务。

【讨论】：

我也是这么想的，但我在根目录下尝试了 index.html 并删除了所有路由。我现在实际上只有一个组件（app.component.ts 文件），并且没有任何链接/路由。转译后的文件不只是一个静态 JS，它应该对 DOM 产生一些魔力吗？我打算简单地将文件上传到我在 Azure 中的服务器，但我觉得如果没有我执行 ng serve （或 Azure 中可能提供的任何其他 Web 服务器），它也不会飞到那里，我非常不喜欢在那里配置东西的需要。 :)
您可能会通过在网页中使用标记来获得改进的结果。尝试将其设置为空白。尽管如此，尝试直接从文件系统提供服务总是与使用 Web 服务器有出人意料的不同，因为所有现代“易于推理”的 Web 习惯如果不 100% 了解它们的工作原理，实际上很难推理一个低水平。 'ng serve' 总是隐藏着一点魔力，但我认为唯一重要的是你的 Azure Web 服务器知道使用 index.html 作为默认文档。
好的。让我们尝试一下，并希望最好。谢谢！