Angular i18n应用部署AKS后路由切换无法读取环境变量

核心问题原因 #

Angular i18n构建完成后，每个语言环境（如/en/）会生成独立的目录结构，包含专属的assets文件夹。当应用路由到/en/路径时，会默认从/en/assets/读取配置文件，但你仅在根目录/assets/生成了env.js，导致路径不匹配无法加载。

推荐方案：修改Nginx配置（无需复制多份assets） #

通过Nginx的路由转发规则，将所有语言路径下的assets请求统一指向根目录的assets文件夹，这样只需维护一份配置文件，完全符合一次构建、多环境部署的目标。

修改Nginx配置文件（nginx.conf） #

在你的Nginx配置中添加以下规则，匹配语言路径下的assets请求并转发到根目录：

# 匹配/en/assets/、/fr/assets/等语言路径下的assets请求
location ~ ^/([a-z]{2})/assets/(.*)$ {
    alias /usr/share/nginx/html/assets/$2;
}

# 同时保留根路径的assets访问规则
location /assets/ {
    root /usr/share/nginx/html;
}

或者使用rewrite规则实现相同效果：

rewrite ^/([a-z]{2})/assets/(.*)$ /assets/$2 last;

调整Dockerfile（保持现有逻辑即可） #

你当前的Dockerfile已经将根目录assets配置好（生成env.js的逻辑），无需额外修改各语言目录的assets，只需确保Nginx配置生效即可。

备选方案：替换各语言环境的assets文件（不推荐） #

如果一定要通过复制assets文件解决，需要在Dockerfile中为每个语言环境复制assets目录并生成对应的env.js，但这种方式会增加镜像体积，且不符合一次构建的简洁性，维护成本更高。

示例修改（仅作参考，不推荐）：

# 复制所有语言环境的assets目录
COPY --from=build /app/dist/<app>/en/assets/ /usr/share/nginx/html/en/assets
COPY --from=build /app/dist/<app>/fr/assets/ /usr/share/nginx/html/fr/assets
# 为每个语言目录删除原env.js
RUN rm /usr/share/nginx/html/en/assets/env.js /usr/share/nginx/html/fr/assets/env.js

CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/en/assets/env.js && envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/fr/assets/env.js && exec nginx -g 'daemon off;'"]

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