如何防止 Angular 在生产模式下删除查询参数？答案

【问题标题】：How can I prevent angular from removing query parameters on production mode?如何防止 Angular 在生产模式下删除查询参数？
【发布时间】：2021-02-24 21:05:17
【问题描述】：

我正在为我的工作构建一个 web 应用程序，它使用 angular 10 作为前端，使用 Spring boot 2.2 作为后端。这是一个非常简单的应用程序，只有一个路由，但这个路由可以接收查询参数并根据参数显示不同的 HTMLitem 这些是我的路线：

const routes: Routes = [
   {path:'mainapp', component: HomeComponent},
   {path: '', redirectTo: '/mainapp', pathMatch:'full'}
]

该应用程序在开发模式下运行良好，我的意思是当我用 java 运行我的 war 文件然后运行 ng serve 时，一切都很好

但是，当我在 /resources/static 文件夹中生成生产版本时，Spring boot 可以将我的 Angular 应用程序作为静态站点提供服务，但存在一些问题。

第一个问题是当我尝试导航到 localhost:8080:/?report=weekly 时，它会将我重定向到 localhost:8080:/mainapp 并删除我的查询参数。第二个问题是当我尝试导航到 localhost:8080:/mainapp 或 localhost:8080:/mainapp?report=weekly 时，它会显示带有 404 错误代码的 Whitelabel 错误页面。即使我刷新网站

我在尝试将 Angular 应用程序部署到 VPS 之前遇到了类似的问题，当时我可以使用一些命令添加一个 .htaccess 文件，所以我在这里也尝试了这个，这是我添加的文件：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

但显然，这不起作用。该文件是在我的 angular.json 文件所在的同一级别添加的。

这是我的项目文件夹结构

我在 Ui 文件夹中有 Angular 应用程序

我不确定我还能告诉你什么，但如果你需要关于我的项目的任何其他信息，请告诉我。

另外，由于这是一个与工作相关的项目，我无法直接上传代码，但是，我正在尝试复制基本架构以将其上传到 Github

在那之前，有人能指出我正确的方向吗？如何修复这条路线？

谢谢！

【问题讨论】：

标签： javascript java angular spring-boot production

【解决方案1】：

所以经过几个尝试和错误的季节后，我设法通过添加一个重定向到我的索引的控制器来完成这项工作

@Controller
public class ViewController {
   @RequestMapping("/mainapp")
   public String index(){
      return "forward:/index.html";
   } 

 }

以防万一其他人遇到同样的问题

【讨论】：