部署后从 URL 中删除 # 不起作用 - HTTP 404
Removing # from URL does not work after deployment - HTTP 404
我正在尝试在我的 Angular 应用程序中删除 #-red URLs（Google recommends it 如果您的应用程序不提供可索引的内容在第一次加载时）。 Web 应用程序位于我的 Spring 启动应用程序的 static/ 目录中。
所以我禁用了 #:
export const AppRouting = RouterModule.forRoot(routes, {
useHash: false,
enableTracing: false
});
在我的本地机器上一切正常，例如
列出柏林的所有汽车，但
部署站点后给我 HTTP 404。
我不确定为什么会这样。我该如何解决这个问题？
但是，根 URL http://example.com 正常工作。显示了网站内容，但无法访问以下任何页面。
您需要在您的网络服务器中配置 URL 重写。不同的网络服务器的配置是不同的。在 url 中使用 # 告诉 Angular 主页 url 的开始，SPA 逻辑使用它工作。没有# Angular 无法检测主页开始。所以你需要在网络服务器配置中配置它。
您需要将请求的路线重置为 index.html
这可能有帮助：
试试这个：-
构建项目并转到 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>
&保存
或如需更多参考，请参阅此 link
这就是我最终所做的。正如这个答案的长度所暗示的那样，它更简单。
1) 将应用移至单独的路径
我将我所有的应用程序（目前有两个）移动到子目录。这意味着我的所有应用程序都需要在 base-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 项目
Move/copy dist/ 中的内容（ng build 的输出）到（在我的例子中）src/main/resources/static 如果你还没有在那里构建它：
src/main/resources/static/admin-tool
src/main/resources/static/web
3) 做必要的转发
正如其他答案中提到的，现在必须将请求转发到相应的 index.html "files"（我们就这样称呼它吧）。
原因如下（据我所知）：在我们做这一切之前，Angular 只是在 #-ed 路径上工作，这导致 JS 代码根据之后的内容进行更新#。如果我做对了 - 删除 # 实质上意味着浏览器现在正在对所有这些 URL 发出 GET 请求。因此，在 cars 示例中，如果我有 place/route 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
我正在尝试在我的 Angular 应用程序中删除 #-red URLs（Google recommends it 如果您的应用程序不提供可索引的内容在第一次加载时）。 Web 应用程序位于我的 Spring 启动应用程序的 static/ 目录中。
所以我禁用了 #:
export const AppRouting = RouterModule.forRoot(routes, {
useHash: false,
enableTracing: false
});
在我的本地机器上一切正常，例如
列出柏林的所有汽车，但
部署站点后给我 HTTP 404。
我不确定为什么会这样。我该如何解决这个问题？
但是，根 URL http://example.com 正常工作。显示了网站内容，但无法访问以下任何页面。
您需要在您的网络服务器中配置 URL 重写。不同的网络服务器的配置是不同的。在 url 中使用 # 告诉 Angular 主页 url 的开始，SPA 逻辑使用它工作。没有# Angular 无法检测主页开始。所以你需要在网络服务器配置中配置它。
您需要将请求的路线重置为 index.html
这可能有帮助：
试试这个：- 构建项目并转到 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>
&保存 或如需更多参考，请参阅此 link
这就是我最终所做的。正如这个答案的长度所暗示的那样，它更简单。
1) 将应用移至单独的路径
我将我所有的应用程序（目前有两个）移动到子目录。这意味着我的所有应用程序都需要在 base-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 项目
Move/copy dist/ 中的内容（ng build 的输出）到（在我的例子中）src/main/resources/static 如果你还没有在那里构建它：
src/main/resources/static/admin-tool
src/main/resources/static/web
3) 做必要的转发
正如其他答案中提到的，现在必须将请求转发到相应的 index.html "files"（我们就这样称呼它吧）。
原因如下（据我所知）：在我们做这一切之前，Angular 只是在 #-ed 路径上工作，这导致 JS 代码根据之后的内容进行更新#。如果我做对了 - 删除 # 实质上意味着浏览器现在正在对所有这些 URL 发出 GET 请求。因此，在 cars 示例中，如果我有 place/route 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