如何处理Angular中的深层链接?

Tam*_*gár 17 angular

对此有很多疑问.我已经浏览了好几天了.我尝试了一切,但都没有奏效.是的,我也检查了angular.io,但这也没有用.所以,请问,有人可以提出最终答案,或者指出一个我可能还没有看到过的答案吗?

这是一个URL,一个指向Angular应用程序的深层链接whatever及其someroute带参数的路径.

http://somedomain.com/whatever/someroute/123456
Run Code Online (Sandbox Code Playgroud)

当然它会导致404错误.必须配置Web服务器.我的服务器运行nginx,我做了这个:

location / {
     try_files $uri $uri/ /whatever/index.html;
}
Run Code Online (Sandbox Code Playgroud)

现在它将此服务器上每个站点的404错误重定向到我的Angular应用程序,但这是次要问题.问题是路由仍然不想启动./每次调用默认路由,而不是/someroute/123456.

而不是指向我可能已经看过并尝试过的各种教程,有人可以简单地解释一下我错过了什么微不足道的观点吗?

Mik*_*ill 11

听起来你可能错过了<base href="">标签.此标记告诉Angular路由器您的应用程序的基本URI是什么.如果不存在,则Angular假定初始导航URI(在您的情况下/whatever/someroute/123456)是基URI,并且将相对于该URI执行所有后续路由.

尝试<base href="/whatever/"><head>您的元素中包含相应的index.html指向路由器.

如果您使用Angular CLI,也可以通过以下方式控制<base href="">元标记ng build:

ng build --base-href '/whatever/'
Run Code Online (Sandbox Code Playgroud)


Gre*_*eek 7

您可以切换到HashLocationStrategy,即

RouterModule.forRoot(appRoutes, {useHash: true});
Run Code Online (Sandbox Code Playgroud)

这导致所有应用程序URL均为index.html,后跟“#”,然后是路由信息。

由于您总是要使用index.html,因此无论采用哪种路由,对于任何有效的URL都不会收到404。


Max*_*art 5

这也让我困惑了一段时间。但仅供记录,Angular 部署文档中有一个关于此的很好的部分,您可以在这里找到https://angular.io/guide/deployment#server-configuration

最重要的是,如果您从应用程序外部导航到应用程序中的某个位置(根位置“/”除外),浏览器会向服务器发送 GET 请求,询问完整的 URL。但由于该 URL 旨在被解释为前端应用程序中的路由,而不是后端服务器中的资源,因此服务器将抛出 404(除非您碰巧也将服务器设置为静态文件)服务器并且该位置恰好有资源)。因此,您需要做的是将服务器配置为使用前端应用程序资产进行响应,而不是返回 404,这样当前端应用程序在浏览器中加载时,它可以检查 URL 并参与其路由逻辑。