Angular项目部署至Namecheap主机后路由参数不生效问题

核心问题原因 #

两个配置不匹配导致：

• Angular构建时的base href路径和实际主机部署路径不一致
• 原有.htaccess重写规则使用的Apache变量不兼容Namecheap主机环境，带多级路径的请求没有正确转发到Angular入口文件index.html

Firebase Hosting默认内置了单页应用路由重写规则，所以不会出现该问题。

修复步骤 #

1. 重新构建Angular项目 #

根据你的实际部署路径指定正确的base路径：

• 如果编译后的文件直接上传到Namecheap cPanel的public_html根目录（访问https://my-domain.com直接打开站点，这是最常见的部署场景），执行构建命令：

ng build --base-href="/"

• 如果站点放在public_html/dist/dress子目录下，访问地址为https://my-domain.com/dist/dress，执行构建命令：

ng build --base-href="/dist/dress/"

2. 替换.htaccess规则 #

将和index.html同目录下的.htaccess文件内容替换为对应场景的规则：

根目录部署场景

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  # 真实存在的文件、目录直接返回，不做重写
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [NC,L]
  # 所有前端路由请求转发到index.html，交给Angular路由处理
  RewriteRule ^ index.html [NC,L]
</IfModule>

子目录部署场景

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /dist/dress/
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [NC,L]
  RewriteRule ^ index.html [NC,L]
</IfModule>

原有规则使用%{DOCUMENT_ROOT}%{REQUEST_URI}做文件存在性判断，在Namecheap的Apache多站点配置下对多级路径的判断会失效，替换为%{REQUEST_FILENAME}即可兼容。

3. 额外优化建议 #

你当前使用snapshot获取路由参数的方式，在同组件内跳转不同参数路由时不会触发参数更新，建议改为订阅模式获取参数，避免同组件跳转时筛选逻辑不生效：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const search_1 = params.get("search_1");
    const search_2 = params.get("search_2");
    // 在这里执行商品筛选逻辑
  })
}

验证 #

上传新构建的文件和.htaccess后，清空浏览器缓存访问带参数路由即可正常加载页面，控制台无静态资源404报错即为配置生效。

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