404 Not Found for shared library with Angular Native Federation

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'
]

});

Continue reading...