Question

我正在尝试摆脱Angular应用中的#-红色URL（在您的应用在首次加载时未显示可索引内容的情况下，Google recommends it）。该Web应用程序位于我的Spring Boot应用程序的static/目录中。

所以我禁止使用#：

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

在我的本地计算机上，一切正常，例如

http://localhost:4200/cars/berlin

列出柏林的所有汽车，但

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

在部署网站后给我HTTP 404。

我不确定为什么会这样。我该如何解决？

但是，根URL http://example.com 工作正常。显示了网站的内容，但无法访问下面的任何页面。

Answer 1

您需要在Web服务器中配置URL重写。不同的Web服务器的配置不同。在网址中使用#会告诉Angular主页网址的开始，SPA逻辑使用该网址。没有#，Angular无法检测到主页的开始。因此，您需要在Web服务器配置中对其进行配置。

Answer 2

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

这可能会有所帮助：

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

Answer 3

尝试一下：- 进行项目构建，然后转到dist文件夹并创建一个文件名“ .htaccess”并在其中粘贴以下代码

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

并保存或有关更多参考，请参考此链接

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

Answer 4

这就是我最终要做的。这很简单，因为答案的长度可能会提示。

1）将应用移动到单独的路径

我将所有应用程序（目前有两个）移到了子目录。这意味着我的所有应用都必须在base-href下工作，如

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

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

#!/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项目

如果尚未在dist/（ng build的输出）中将内容移动/复制到src/main/resources/static（对于我来说）：

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

3）做必要的转发

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

这就是原因（据我了解）：在完成所有操作之前，Angular只是在#版的路径上工作，这导致JS代码根据#之后的内容进行更新。而且，如果我做对了，删除#本质上意味着浏览器现在正在为所有这些URL发出GET请求。因此，从cars的示例来看，如果我有一个地点/路线http://www.example.com/web/cars/berlin，那么这将是服务器必须处理的GET请求-在这种情况下，将其转发到正确的端点。

下面是我在后端使用的代码来实现此目的：

@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％的折扣，我真的希望这只是一种解决方法，但是到目前为止我还没有遇到任何问题。

现在这就是为什么我要做这一切的原因：

显然，出于多种原因，建议远离#版路径。由于我使用的是Angular，因此必须走几英里才能使搜索引擎优化（SEO）正常进行，但是从我得到的结果来看[[1]，[2]，[3]），您应该避免使用它，因为Google不会为其编制索引。他们可能只会将其用作锚点，但是如果您的#后面有AJAX内容，那将是一段糟糕的时光。

有关#!的更多信息，请参见[4]，现在看来似乎已经过时了，还请参见[5]和[6]。

[1] https://www.oho.com/blog/explained-60-seconds-hash-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-rendering

部署后从URL中删除＃无效-HTTP 404

4 个答案:

1）将应用移动到单独的路径

2）将应用程序移至Spring项目

3）做必要的转发