Angular与Nginx部署时PathStrategy失效，子路由404问题求助

1. 修正Dockerfile的静态文件复制路径 #

你的Angular构建产物存放在dist/register目录，当前Dockerfile将整个dist目录复制到Nginx的html目录，导致静态文件实际位于/usr/share/nginx/html/register下，而非根目录。修改COPY步骤，直接复制dist/register下的内容到Nginx的html根目录：

# Stage 1
FROM node:18-alpine as build-step

RUN mkdir -p /app-ui
WORKDIR /app-ui

COPY package.*json /app-ui/
RUN npm install
COPY . /app-ui/
RUN npm run build

# Stage 2
FROM nginx:alpine

COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf

RUN rm -rf /usr/share/nginx/html/*
# 修正复制路径，直接复制dist/register下的内容
COPY --from=build-step /app-ui/dist/register /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

2. 修改Nginx配置，适配PathStrategy #

当前Nginx配置仅处理/appui路径的请求，而你的应用部署在根路径（localhost/），需要让Nginx将所有匹配不到静态文件的路由请求转发到Angular的入口index.html。更新nginx.conf：

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        # 处理根路径下所有请求：优先匹配静态文件，匹配不到则转发到index.html
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

3. 确认Angular路由配置 #

Angular默认使用PathLocationStrategy，无需额外配置。确保你的路由模块没有手动切换到HashLocationStrategy——比如没有在RouterModule.forRoot()中设置useHash: true。

完成以上修改后，重新构建Docker镜像并运行容器，访问localhost/users等子路由即可正常加载，无需使用带#的Hash路由。

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