2015-12-31 50 views
13

这整个新的路线句法听起来很好是真实的,现在我想它实际上是。我放弃了试图使其工作,在这里我注意到,甚至没有Angular 2页面的主要例子。如果你打开实例并尝试它,只需点击它就可以很酷,并且你可以看到url中的路径被改变了,但它只是改变了字符串路径并不存在,如果你复制你的url并发送它给他人他们将得到以下错误:使用HTML5路由时,Angular 2的路由器是否被破坏?

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

地狱,即使你只是刷新页面,你会得到同样的错误。

如果你想重现该问题打开这个网址:

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

点击实时预览右上方的按钮,在“在单独的窗口中启动预览”,等待它加载页面,当你看到网址更改为类似:

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

做一个F5刷新页面,你会得到错误。

这是一个错误,它应该工作的方式,还是他们甚至没有尝试的方式?他们是否已经开始再次使用糟糕的路由器实现,或者我完全失去了试图使其工作的方式?请指教 !

我在猜测我最好使用hashtag实现。

回答

13

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

如果您不想要404错误,则需要更新服务器以为每个路径路径提供index.html文件。

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

希望它可以帮助你, 蒂埃里

+0

是的,我不知道它为什么会发生,这就是为什么我认为它太好,不能成为真实的原因。我没有想到的是,以这种方式使用它的目的是什么,甚至更糟糕,在这种模式下默认功能。重定向到索引可能是有意义的,如果你的应用不仅仅是客户端,而且对于它的外观,使用这种框架的快速应用的最新方法不实现后端,它们只是使用服务。我的后端没有后端。不过,这是一个有效的场景/用例。我会尝试一下,如果它的工作,我会接受你的答案,谢谢=) – Langley

+0

是的,你似乎可以使它工作在一个特定的场景和配置,他们从来没有指定。我仍然认为这不应该是默认行为,或者他们至少应该告诉你这个问题。谢谢老师的帮助! 这一个帮助太:http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Langley

+1

@Langley FYI,这仍然是一个悬而未决的问题正在讨论在'angular2'回购。 https://github.com/angular/angular/issues/4735。也就是说,在浏览器包含HTML5'history.pushState()'支持之前''HashLocationStrategy'是一个必要的破解。 'PathLocationStrategy'是未来的正确方法,但我们需要更好的工具来帮助没有太多后端知识的前端开发人员开始使用。 –

1

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

+1

路由器是由角创建的,他们默认了它的功能,在某种程度上这是越野车没有关于这个问题太多的解释。这与HTML5添加他们正在使用的方法无关。 – Langley

+1

更好的文档总是一件好事,但这是通过HTML5的设计,并且不是**特定的。 Angular添加所有MDN文档是没有意义的。 –

+0

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