I have an Angular 18 Web Application which is deployed in Firebase and Netlify.
The problem is that when the app is online all the services don’t work properly, they respond with the same data every time.
Is an application with live football scores and it keeps showing the same result even if the score has changed.
When I’m on localhost it works perfectly fine, the data is correct and the request is made every time I refresh the page.
I’m almost sure that the App or the browser are caching the data somewhere but I can’t figure out how to solve it.
The problem is on both Firebase and Netlify but not locally.

So far I’ve tried to:

Create an Interceptor for the caching headers

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders } from '@angular/common/http';

@Injectable()
export class CacheInterceptorService implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const httpRequest = req.clone({
      headers: new HttpHeaders({
        'X-Auth-Token': this.authToken,
        'Cache-Control': 'no-cache, no-store, must-revalidate, post-check=0, pre-check=0',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
      })
    });

    return next.handle(httpRequest);
  }
}

Change the Firebase.json like this

{
  "hosting": {
    "public": "dist/toto-euro-24/browser",
    "headers": [
      {
        "source": "/**/!(*.*)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

Adding meta tags on index.html

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0"
    />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />

Using unique URL for httpClient request

Unfortunately I’m using a free external api and it doesn’t allow me to use an unique string created with Date.now()

Destroying the subscription to the Observable

Reloading on Chrome with Disabled Cache or Hard Reloading

not even Incognito Mode in Chrome solves the problem

Building the app with –configuration development instead of production

ng build --configuration development

outputHashing is set to all on production

nothing worked and the situation is still the same, the app works fine locally but not when deployed.