Angular Activated Route在生产站点无法正常工作求助

你的问题本质是Angular单页应用在子目录部署时的路由配置和服务器重写规则问题，本地正常是因为开发服务器自动处理了SPA路由逻辑，而生产服务器不会默认适配这种场景。

1. 构建时指定基础路径 #

生产环境你的应用部署在/peoples-choice/子目录下，但Angular默认以根路径/作为路由基础，导致路由匹配失效。构建应用时必须指定base-href参数：

ng build --prod --base-href "/peoples-choice/"

这个参数会修改打包后index.html里的<base href>标签，让Angular路由基于/peoples-choice/来解析路径。

2. 配置服务器重写规则 #

Angular是单页应用，直接访问/peoples-choice/vote/xxx这类子路由时，服务器会尝试寻找对应的物理文件，找不到就返回404。需要配置服务器将所有非静态文件的请求转发到/peoples-choice/index.html。

Apache服务器配置 #

在peoples-choice目录下创建.htaccess文件，写入：

RewriteEngine On
RewriteBase /peoples-choice/
# 直接访问index.html则跳过处理
RewriteRule ^index\.html$ - [L]
# 如果请求的不是文件或目录，重写到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /peoples-choice/index.html [L]

Nginx服务器配置 #

在Nginx的站点配置中添加：

location /peoples-choice/ {
    try_files $uri $uri/ /peoples-choice/index.html;
}

3. 修正二维码跳转地址 #

你提到的二维码地址https:///peoples-choice/vote/多了一个斜杠，正确格式应为：
https://max-pinjarra.redhot.com.au/peoples-choice/vote/<documentID>

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