Migrating Angular App to Microfrontends (native-federation) Broke My Caching Strategy—Help...

I used to have a single Angular (monorepo) app in production. Users would often complain about cached/stale content, so I enabled an Angular Service Worker (PWA) to force updates whenever we deployed a new version. That worked really well—no more stale content.

Fast-forward to today: we migrated the entire app to microfrontends using angular-architects/native-federation. Now the caching issues have returned. We’re back to users getting old versions unless they do a hard refresh. My original Service Worker setup doesn’t handle the new remote builds.

Possible solutions I came accross:

Extending the Shell’s Service Worker to also update the remote microfrontends.

The idea is for the shell’s SW to know when an MFE (on a subdomain) has changed and prompt users to reload. But since subdomains are typically outside the same SW scope, I’m not sure how feasible this is. If anyone’s done this successfully, please let me know!

Hashed or Versioned remoteEntry.json files, so a normal reload fetches new code automatically.

This was suggested to avoid the old file being served from cache. But angular-architects/native-federation docs are pretty sparse on how to configure hashed filenames for remoteEntry.json. If you’ve figured out how to do it, I’d love some pointers or code examples.

Current Setup (Simplified), Shell imports remote routes via a manifest:

export const ROUTELIST = [
{
path: "",
loadComponent: () => import("@myapp/app").then((m) => m.AppComponent),
children: [getMfeRouteConfig("mfe1", "@myapp/mfe1")],
},
];

export function getMfeRouteConfig(
urlKey: string,
remoteUrl: string,
routeModule = "./Routes"
): Route {
return {
path: urlKey,
loadChildren: () =>
loadRemoteModule(remoteUrl, routeModule).then((m) => m.routes),
};
}


federation.manifest.json in the shell:

{
"@myapp/mfe1": "http://localhost:4208/remoteEntry.json"
}


Remote config (simplified):

const {
withNativeFederation,
} = require("@angular-architects/native-federation/config");
const shareConfig = require("../../libs/nf-remote/src/lib/helper/federation-share-config");
module.exports = withNativeFederation({
name: "mfe1",
exposes: {
"./Routes": "./apps/mfe1/src/app/remote.routes.ts",
},
...shareConfig,
});


CI/CD config sets up the domain:

federation.manifest.json: |
{
"@myapp/mfe1": "https://${MFE1_REMOTE_DOMAIN}/remoteEntry.json"
}


What I Need Guidance on making the shell’s service worker detect remote updates (which are on subdomains like mfe1.something.dev).

OR a working example or best practices for versioning/hashing remoteEntry.json with angular-architects/native-federation. I can’t find official docs on this; maybe someone has done it before?

If you have any tips, advice, or even a better approach entirely, I’d love to hear it. My priority is ensuring users always get the newest code without needing a hard refresh, but I also don’t want to kill performance with constant no-cache headers. Thanks in advance!

Continue reading...