CODEWITHSUNDEEP
angularfirebasefirebase-hosting
flashape
flashape

Reputation: 567

Firebase hosting no-cache for Angular 5 app

I'm trying to get my Angular app's index page not to cache. I've formatted my firebase.json rules according to this post: 

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": "npm --prefix functions run build"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers" : [{
      "source": "/**",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-cache, no-store, must-revalidate"
        }
      ]
    },
      {
        "source":
        "**/*.@(jpg|jpeg|gif|png|svg|js|css|eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      }]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

It appears that the rules are working fine if I check the the browser console:

firebase no cache result

However, it is still loading stale files and I need to hard reload in order to see the changes. Any idea what the issue could be?

Upvotes: 2

Views: 1306

Answers (1)

flashape
flashape

Reputation: 567

Ok I figured it out. I was not using the -prod flag when running ng build, so the the js and css bundles were not getting hashes added to their name (i.e. main.bf49565a4e90c0772548.bundle.js), so those files were still getting cached.

Upvotes: 1

Related Questions