Question

对此有很多疑问。我好几天都在浏览它们。我尝试了一切，但都没有奏效。是的，我也检查了angular.io，这也没有用。所以，请问，有人可以提出最终答案或指出我可能还没有看到的答案吗？

以下是此网址，指向名为whatever的Angular应用的深层链接及其带参数的someroute路由。

http://somedomain.com/whatever/someroute/123456

当然会导致404错误。必须配置Web服务器。我的服务器运行nginx，我这样做了：

location / {
     try_files $uri $uri/ /whatever/index.html;
}

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

不是指向我可能已经看过和试过的各种教程，有人可以简单地解释一下我错过的那个小问题吗？

Answer 1

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

尝试在<base href="/whatever/">的{{1}}元素中加入<head>，以便相应地引导路由器。

如果您使用Angular CLI，也可以通过index.html控制<base href="">元标记：

ng build

Answer 2

您可以切换到HashLocationStrategy，即

RouterModule.forRoot(appRoutes, {useHash: true});

这导致所有应用网址都是index.html，其次是＆＃34;＃＆＃34;然后是路由信息。

由于您始终使用index.html，因此无论路线如何，您都无法获得任何有效网址的404.

Answer 3

这也让我绊了一段时间。但是，仅作记录，Angular部署文档中有一个很好的部分，您可以在此处https://angular.io/guide/deployment#server-configuration

中找到。

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

Answer 4

在使NGINX 1.17与Angular 9中的路由结合使用时，我遇到了同样的困难。我终于找到了一个NGINX配置，该配置支持分别进行深度链接的深层路由，并且同时不需要使用Angular的{{1 }}，也没有设置HashLocationStrategy。

我所做的主要区别是我在<base href="">块中添加了root指令，以指定用于搜索文件的根目录：

location

此NGINX配置假定Angular的dist文件夹的内容位于events { worker_connections 1024; } http { server { listen 80; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } } include /etc/nginx/mime.types; }中。通过这种配置，对于/usr/share/nginx/html/之类的路由，我不会遇到任何HTTP 404错误（即使我通过按F5键在浏览器中重新加载页面，或者直接导航至该路由）。

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

4 个答案: