angular - Angular Web 应用程序经常对某些用户失去风格

问题描述

我正在开发一个在 Angular 上运行的应用程序，我们的应用程序的样式确实存在一些问题。我们的一些用户（包括我）在访问我们的平台时没有加载任何样式。这是非常限制和非常糟糕的用户体验，特别是当他们收到一封将他们重定向到我们的应用程序的电子邮件并且他们需要查看发生了什么时，当他们单击邮件中的按钮以访问平台时，如果样式不是加载后他们将无法到达电子邮件发送给他们的页面，他们将被重定向到主页而没有任何样式。

所以，有一个解决方法，如果他们刷新页面（简单刷新，shit+F5，CTRL+F5），样式将被加载，他们将能够在没有样式问题的情况下使用我们的应用程序，直到他们离开应用程序并恢复一些再过一段时间，就不会再有风格了。

我已经阅读了很多帖子、文章来尝试修复它，我的团队也是如此，但我们无法解决这个问题，以下是我们尝试过的列表：

不将文件缓存在nginx配置中，以始终拥有最新部署的文件
有新版本时刷新应用程序
在angular.json将“优化”设置为 true 时，它会缩小 css 文件和所有...
在<base href="/" />index.html 文件中

此外，我们的应用程序确实有2 个环境，用于预发布、测试等的“暂存”应用程序......以及“生产”应用程序。我们只在生产中遇到这个问题，即使这两个平台具有相似的配置，这怎么可能？

我们还发现了一些问题，当我们检查 chrome 的“Sources”选项卡中的文件时，我们会看到样式文件中缺少样式时存在 HTML 代码。

谷歌浏览器没有显示任何错误，但在 Firefox 中我们有：

这是 Chrome“Sources”选项卡中样式文件的内容：

我们用于 nginx 配置的 default.conf 的内容如下所示：

server {
    listen 80;

    location / {
        # kill cache
        expires -1;
        sendfile off;
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache';
        if_modified_since off;
        etag off;

        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

这是服务器中运行的 nginx.conf 的内容，不知道怎么编辑？我没有这个文件，我认为它是自动生成的：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

我们一直在寻找，但直到现在都无法解决这个问题，有人知道如何解决这个问题并始终加载样式吗？

角度版本是 12.1.1

非常感谢！

标签： angularnginx

angular - Angular Web 应用程序经常对某些用户失去风格

问题描述

解决方案

推荐阅读