404 Not Found for shared library with Angular Native Federation

Question

I'm migrating an existing Angular v16 module-federation application to Angular v18 and the esbuild-based native federation plugin. The application has a dozen microfrontends hosted inside the shell application.

I've gotten the host application updated and running native-federation, and I've made the basic changes in the first microfrontend to load it as a remote inside the shell. But when I try to initiate loading that MFE inside the shell, I get 404 errors for the shared libraries (such as angular core and angular common) as an async/await request can't find them.

Why aren't the basic libraries shared?

I'm using the vanilla template for sharing the MFE via the federation.manifest.json file.

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

  name: 'managerFrontend',

  exposes: {
    './Component': './src/app/manager/manager.component.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket'
  ]
  
});

Answer 1

Precise versions seem to be needed here.

I was able to fix this by using the very latest version of the plug-in and by precisely matching the versions of the Angular libraries.

It also seems there was a bug in the original v18 version of the Native Federation plug-in, something that was fixed with v18.2.2.

  "dependencies": {
    "@angular-architects/native-federation": "^18.2.2",
    "@angular/animations": "18.2.7",
    "@angular/common": "18.2.7",
    "@angular/compiler": "18.2.7",
...