Native Federation MF warnings after migrated to Angular 18 to Angular 20

I just updated my Shell and my microfrontend to Angular version 20 with Native Federation.

What's happening isn't an error per se, but it does give some warnings that are very annoying.

Warnings

Most of them come from Angular Material. And I understand the warnings come from the fact that both the Shell and MF load their own version of the library, and that's what causes the warnings to appear.

Shell federation.config:

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

module.exports = withNativeFederation({
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},
skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
'material-icons',
'relay-runtime',
'@apollo/client',
'@apollo/client/core',
'@apollo/client/link/ws',
'@apollo/client/testing/experimental/createTestSchema',
'@apollo/client/testing/experimental/graphql-tools/utils',
'@apollo/client/testing/internal/ObservableStream',
'subscriptions-transport-ws',
'@graphql-tools/schema',
'@graphql-tools/merge',
'@graphql-tools/utils',
'@jest/expect-utils',
'@angular/material',
'@angular/material/*',
'@angular/cdk',
'@angular/cdk/*'
],
features: {
ignoreUnusedDeps: true
}
});


MF Federation.config:

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

module.exports = withNativeFederation({
name: 'combos',
exposes: {
"./Combos": "./src/routes.ts",
},
shared: {
'@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/platform-browser': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'rxjs': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@ngx-translate/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'apollo-angular': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@apollo/client/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'apollo-angular/http': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@ngx-translate/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'ngx-lottie': { singleton: true, strictVersion: true, requiredVersion: 'auto' }
},
output: {
uniqueName: 'combos',
publicPath: 'auto',
json: true,
}
});


Angular version:

Angular CLI: 18.1.2
Node: 20.19.4
Package Manager: npm 10.8.2
OS: win32 x64

Angular:
...

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1801.2 (cli-only)
@angular-devkit/core 18.1.2 (cli-only)
@angular-devkit/schematics 18.1.2 (cli-only)
@schematics/angular 18.1.2 (cli-only)


Thank you for your support first of all

Help to find a solution

Continue reading...