使用 HTML5 路由时，Angular 2 的路由器是不是损坏？ [复制]

Posted 2023-03-13

【中文标题】使用 HTML5 路由时，Angular 2 的路由器是不是损坏？ [复制]

【英文标题】：Is Angular 2's Router broken when using HTML5 routes? [duplicate]使用 HTML5 路由时，Angular 2 的路由器是否损坏？ [复制]

【发布时间】：2016-04-05 03:17:01

【问题描述】：

这个全新的路线语法听起来不错，现在我认为它确实如此。我放弃了让它工作的尝试，在这里我注意到甚至 Angular 2 页面中的主要示例都不起作用。如果您打开实时示例并尝试它，只需单击它就可以了，您可以看到 url 中的路径发生了变化，但它只是更改了字符串，如果您复制您的 url 并发送它，路径并不真正存在给某人，他们会收到以下错误：

    "statusCode": 404,
    "error": "Not Found"

即使你只是刷新页面，你也会得到同样的错误。

如果您想重现该问题，请打开此 URL：

https://angular.io/resources/live-examples/tutorial/ts/plnkr.html

点击实时预览右上角的“在单独的窗口中启动预览”按钮，等待它加载页面，当您看到 URL 变为如下内容时：

http://run.plnkr.co/KMzM8hkaCyhlnf3b/dashboard

按 F5 刷新页面，您会收到错误消息。

这是一个错误，它的工作方式，还是他们甚至没有尝试过的东西？他们是否已经从一个糟糕的路由器实施重新开始，或者我完全迷失了我如何让它工作？请指教！

我猜我最好使用主题标签实现。

【参考方案1】：

事实上，上传应用程序时出现 404 错误是正常的，因为浏览器中的实际地址正在更新（并且没有 #/hashbang 方法）。默认情况下，HTML5 历史记录用于在 Angular2 中重用。

如果您不想出现 404 错误，您需要更新您的服务器，以便为每个路由路径提供 index.html 文件。

此链接也可以帮助您：When I refresh my website I get a 404. This is with Angular2 and firebase。

希望对你有帮助 蒂埃里

【讨论】：

是的，我不明白为什么会这样，这就是为什么我认为这太好了以至于难以置信。我不明白以这种方式使用它的目的是什么，甚至更糟糕的是，在该模式下默认功能。如果您的应用程序不仅仅是客户端，并且从外观上看，使用这种框架的快速应用程序的最新方法没有实现后端，它们只是使用服务，那么重定向到索引可能是有意义的。我的还没有后台。尽管如此，它是一个有效的场景/用例。我会尝试一下，如果有效，我会接受您的回答，谢谢=)

是的，您似乎可以使其在他们从未指定的特定场景和配置下工作。我仍然认为这不应该是默认行为，或者他们至少应该告诉你这个问题。谢谢老大的帮助！这个也有帮助：***.com/questions/31415052/…

@Langley 仅供参考，这仍然是angular2 repo 中正在讨论的未解决问题。 github.com/angular/angular/issues/4735。即 HashLocationStrategy 在浏览器包含 HTML5 history.pushState() 支持之前是必要的黑客攻击。 PathLocationStrategy 是正确的方法，但我们需要更好的工具来帮助没有大量后端知识的前端开发人员入门。

@Thierry Templier 您提到了 HTML5 的历史，这是否意味着它不适用于旧浏览器？

【参考方案2】：

这是设计的（由 HTML5 而非 Angular 引入）。切换到 HashLocationStrategy 或使用知道如何处理（重定向）此类请求的服务器。 另见https://github.com/angular/angular/issues/4735

【讨论】：

路由器是由 Angular 创建的，他们默认它的功能是错误的，没有对这个问题做太多解释。这与 HTML5 添加他们正在使用的方法无关。

更好的文档总是一件好事，但这是由 HTML5 设计的，并且 不是 Angular 特定的。 Angular 添加所有 MDN 文档是毫无意义的。

浏览器基于 HTML 规范实现该功能的事实与使用它的框架无关，甚至建议以不正确的方式使用它。

只是随机选择***.com/questions/15349648/…, ***.com/questions/5942350/…