Nginx 与 angular 6 条路由冲突

Question

我有一个 angular 6 应用程序，其基本 href 设置为 /dashboard/。构建的文件位于服务器上，使用 --prod 标志生成。

nginx conf 看起来像：

location /dashboard {
    alias /<path_to_built_files>/frontend/dist/frontend/;
}

当我第一次访问我的网站时，example.com/dashboard，应用程序完美加载并且 angular 重定向到默认路由 /create。因此浏览器将我的路线显示为 example.com/dashboard/create.

这正是我希望它的行为方式。但是，如果我从此处重新加载页面，浏览器会尝试查找 example.com/dashboard/create，但找不到 returns 404。

我这里的配置有什么问题吗？

Answer 1

如果在 index.html:

的路径上找不到文件，则需要设置索引文件和重定向

location /dashboard {
  alias /<path_to_built_files>/frontend/dist/frontend/;
  index index.html;
  try_files $uri $uri/ index.html =404;
}

Answer 2

You could use hash location strategy, which helps remembering URL for browsers. It uses the hash fragment part of the URL to store state for the client, it easier to setup and doesn’t require any co-operation from the server side. So, just add useHash in your router configuration as follows -

RouterModule.forRoot(appRoutes, {useHash: true});

然后您可以重建您的应用程序并部署到生产环境。您会看到 # 添加到您的 URL。

Nginx 与 angular 6 条路由冲突

Nginx conflicting with angular 6 routes

nginx

angular

angular-router