Angular应用部署后URL参数无法传递至落地页问题求助

方案一：切换路由模式为PathLocationStrategy（移除URL中的#） #

如果服务器支持HTML5路由规则，推荐使用这种方式：

1. 修改app-routing.module.ts的路由配置，移除useHash: true：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 配置服务器重定向规则，确保所有请求都指向应用的index.html：
   • Nginx：在站点配置中添加：

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

   • Apache：在项目根目录创建.htaccess文件，写入：

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

方案二：保留Hash模式，调整参数传递位置 #

如果不想改动路由模式，需确保参数放在#之后：

• 外部访问时直接使用格式：https://www.betradating.com/#/?referralId=1，参数会保留在Hash片段中，Angular可正常读取。
• 若需要兼容原有外部链接（参数在#前），可在服务器配置重写规则，自动将参数转移到Hash后：
  以Nginx为例，添加规则：

  if ($args ~* "referralId=(\d+)") {
    set $ref_id $1;
    rewrite ^/$ /#/?referralId=$ref_id? permanent;
  }
  

方案三：在Angular初始化时捕获并处理参数 #

如果必须保留#前的参数，可在应用启动时主动获取并处理：
在app.component.ts的ngOnInit中添加逻辑：

ngOnInit() {
  const urlParams = new URLSearchParams(window.location.search);
  const referralId = urlParams.get('referralId');
  if (referralId && !window.location.hash.includes('referralId')) {
    // 保存参数到本地存储或全局服务
    localStorage.setItem('referralId', referralId);
    // 跳转到带参数的Hash路由
    window.location.href = `${window.location.origin}/#/?referralId=${referralId}`;
  }
}

注意：添加判断避免重复跳转循环。

内容的提问来源于stack exchange，提问作者Rick