Question

我正在使用Angular的CLI工具。当我执行

ng serve

应用程序开始运行并且工作得非常好。现在，我想将它分发到广告网并尝试通过

进行构建

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>

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

因为我在控制台中看不到任何错误，所以从 src 目录中提供服务等等。我猜我已经忘记了一些相当简单的东西需要打开或注释掉的东西。谷歌搜索这样一个模糊的问题导致了一堆无用的信息。

我该怎么办？我怎样才能更深入地解决问题呢？

Answer 1

我在index.html中使用此脚本而不是<base href="/">来打开dist目录中的文件。我不确定它可能是你的解决方案，但可能有帮助。

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

Answer 2

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

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

在index.html亲戚：<script type="text/javascript" src="./inline.bundle.js"></script>
将base href设置为dist文件夹的位置：
使用IE11或EDGE。 FF和Crome会给你安全警告。

Answer 3

我不认为路由器可以弄清楚如何处理文件：// url。 Angular对路线的处理方式有些令人不安。导航到路由时，它取决于提供默认文档（index.html）的Web服务器，然后它实际上重写URL以考虑路由器在内部处理基础之后的任何内容。

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

构建

3 个答案: