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.
ftudini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.