部署后从URL中删除＃不起作用-HTTP 404

Question

我正在尝试在我的Angular应用中删除ot ot # -red url（Google建议您在您的应用程序不在第一个负载上显示可索引的内容）。Web应用程序位于我的Spring Boot应用程序的static/目录中。

所以我禁止使用#：

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: false,
  enableTracing: false
});

在我本地的机器上恢复正常运行，例如

http：//localhost：4200/car/berlin

列出柏林的所有汽车，但

http://www.example.com/cars/berlin

部署网站后给我http 404。

我不确定为什么会发生这种情况。我该如何解决？

但是，root URL http://example.com是工作正确。显示网站的内容，但无法联系到以下任何页面。

Answer 1

您需要在网络服务器中配置RERL。对于不同的网络服务器，配置不同。在URL中使用#告诉Angular主页URL的开始和Spa逻辑使用它。没有# Angular将无法检测主页启动。因此，您需要在网络服务器配置中进行配置。

Answer 2

您需要将请求的路由重置为 index.html

这可能会有所帮助：

https://angular.io/guide/deployment#server-configuration

Answer 3

尝试以下操作： - 建立项目＆amp;只需转到Dist文件夹＆amp;创建一个文件名" .htaccess"＆amp;粘贴以下代码

    <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

＆amp;保存或有关更多反思，请参阅此链接

https://github.com/angular/angular-cli/issues/5113

Answer 4

这就是我最终做的。这更简单，因为这个答案的长度可能暗示。

---

1）将应用程序移至单独的路径

我将所有应用程序（目前有两个应用程序）移至子目录。这意味着我所有的应用都必须像

中的基本HREF下工作

www.example.com/admin-tool/index.html
www.example.com/web/index.html

这是我用来构建admin-tool应用的ng命令：

#!/usr/bin/env bash
BASE_HREF=admin-tool
ng build --aot --prod --base-href /$BASE_HREF/ --output-hashing none --output-path dist/$BASE_HREF --deploy-url /$BASE_HREF/

---

2）将应用程序移至Spring Project

移动/将dist/中的内容（ng build的输出）中的内容复制到（在我的情况下）src/main/resources/static如果您还没有在此处构建它：

src/main/resources/static/admin-tool
src/main/resources/static/web

---

3）执行必要的转发

如其他答案中所述，现在必须将请求转发到相应的index.html"文件"（让我们这样称呼）。

这就是为什么（据我了解）：在我们完成所有操作之前，Angular只是在# -ED路径上工作，该路径导致JS代码根据#之后的内容进行更新。而且，如果我正确得分 - 删除#本质上意味着浏览器现在正在向所有这些URL提出请求。因此，在cars示例中，如果我有一个位置/路由http://www.example.com/web/cars/berlin正确端点。

以下是我在后端使用的代码来完成此操作：

@Controller
public class ForwardController {
    @RequestMapping(value = "/*")
    public String rectRoot(HttpServletRequest request) {
        return "forward:/web/index.html";
    }
    @RequestMapping(value = "/**/{[path:[^\.]*}")
    public String redirect(HttpServletRequest request) {
        if (request.getRequestURI().startsWith("/admin-tool")) {
            return "forward:/admin-tool/index.html";
        } else if (request.getRequestURI().startsWith("/web")) {
            return "forward:/web/index.html";
        }
        return "forward:/web/index.html";
    }
}

---

我还没有给它100％，我真的希望这只是一个解决方法，但是到目前为止，我还没有任何问题。

现在这就是为什么我要这样做：

显然，由于几个原因，建议您离开# -ED路径。由于我使用的是Angular，因此我必须再走几英里才能获得搜索引擎优化（SEO），但是从我得到的（[1]，[2]，[3]）时，您应该避免它，因为Google不会索引它。他们可能只将其用作锚点，但是如果您在#背后有Ajax内容，那么您将有一个糟糕的时光。

参见有关#!的进一步[4]，这似乎也被弃用了，还可以看一下[5]和[6]。

。

---

[1] https://www.oho.com/blog/explained-60-60-hash-symbols-symbols-urls-and-seo

[2] https://www.seroundtable.com/google-no-hashtags-in-urls-26537.html

[3] https://www.seroundtable.com/google-no-url-fragments-23449.html

[4] https://webmasters.stackexchange.com/a/18606/64452

[5] https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html

[6] https://snipcart.com/blog/angular-seo-universal-server-side-side订阅