Angular2 + Nginx 深度链接/路由问题

Posted 2023-02-27

【中文标题】Angular2 + Nginx 深度链接/路由问题

【英文标题】：Angular2 + Nginx Deep Linking/Routing Issue

【发布时间】：2017-03-05 23:00:49

【问题描述】：

我在我的 Apache Web 服务器上部署了一个 Angular2 应用程序，并使用以下 .htaccess，

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteCond %REQUEST_FILENAME -f [OR]
    RewriteCond %REQUEST_FILENAME -d
    RewriteRule ^ - [L]
    RewriteRule ^ index.html [L]
</IfModule>

以及 index.html 中的附加配置，

<base href="/applicationName/">

应用程序能够毫无问题地加载，也没有重定向问题。

我现在正尝试在我的 nginx 服务器中设置相同的应用程序，但我似乎无法让它工作。

我知道 Nginx 中没有 .htaccess，如何将上面的 .htaccess 转换为在 Nginx 主配置中工作？

非常感谢！

【问题讨论】：

有人吗？谢谢！

这个问题已经被完整地记录在 Angular 文档中：Routed apps must fallback to index.html

【参考方案1】：

在我看来，Nginx 实际上比 apache 容易得多。一种方法是创建这样的服务器块。当然，前提是你可以访问服务器上 nginx 的配置文件。

server 
    listen       80;
    server_name  example.com;

    root   /path/to/your/index;
    index index.html;

    location / 
      try_files $uri $uri/ /index.html;
    

【讨论】：

嗨皮埃尔，我已经在我的默认配置文件中尝试了上述块，但仍然没有运气。

我可以加载主索引页面，但是当我尝试执行某个进程时，例如。登录，我收到错误 500，==> /var/log/nginx/error.log domain.com/application/login"

啊，还有一点需要注意的是，同一台服务器上会运行多个应用程序，所以将根设置为 /var/www/html 作为主文档根，我会添加浏览器地址栏中 / 后的应用程序名称。