NX Module Federation: ng-zorro-antd library not shared between host and remote apps

I am working on an NX monorepo setup with Module Federation, and I'm facing an issue with sharing the ng-zorro-antd library between my host and remote applications. Despite configuring the library as a shared module, it seems to be loaded twice, causing conflicts like

NG0912: Component ID generation collision detected. Components 'NzMenuItemComponent' and 'NzMenuItemComponent' with selector '[nz-menu-item]' generated the same component ID...

To get the list of all my shared libs I'm using __webpack_require__.S and it looks that way:

@angular/animations: {17.3.10: {…}}
@angular/animations/browser: {17.3.10: {…}}
@angular/cdk/a11y: {17.3.10: {…}}
@angular/cdk/bidi: {17.3.10: {…}}
@angular/cdk/coercion: {17.3.10: {…}}
@angular/cdk/collections: {17.3.10: {…}}
@angular/cdk/keycodes: {17.3.10: {…}}
@angular/cdk/layout: {17.3.10: {…}}
@angular/cdk/observers: {17.3.10: {…}}
@angular/cdk/overlay: {17.3.10: {…}}
@angular/cdk/platform: {17.3.10: {…}}
@angular/cdk/portal: {17.3.10: {…}}
@angular/cdk/scrolling: {17.3.10: {…}}
@angular/common: {17.3.10: {…}}
@angular/common/http: {17.3.10: {…}}
@angular/core: {17.3.10: {…}}
@angular/core/primitives/signals: {17.3.10: {…}}
@angular/core/rxjs-interop: {17.3.10: {…}}
@angular/forms: {17.3.10: {…}}
@angular/platform-browser: {17.3.10: {…}}
@angular/platform-browser/animations: {17.3.10: {…}}
@angular/router: {17.3.10: {…}}
@ng-web-apis/common: {3.0.6: {…}}
jsoneditor: {10.0.3: {…}}
ngx-device-detector: {7.0.0: {…}}
rxjs: {7.8.1: {…}}
rxjs/operators: {7.8.1: {…}}


my MF configuration for the host application looks like:

const config: ModuleFederationConfig = {
name: 'shell',
shared: (libraryName, sharedConfig) => {
if (libraryName !== 'ng-zorro-antd') { return sharedConfig; }
return { singleton: true, strictVersion: true, requiredVersion: '^17.4.0' };
},
};
export default config;


I'm using dynamic MF so my manifest looks like:

{
"historyApp": "http://localhost:4201"
}


My remote MF config looks almost same as for host:

const config: ModuleFederationConfig = {
name: 'historyApp',
exposes: { './App': 'apps/history/src/app/remote.module.ts' },
shared: (libraryName, sharedConfig) => {
if (libraryName !== 'ng-zorro-antd') { return sharedConfig; }
return { singleton: true, strictVersion: true, requiredVersion: '^17.4.0' };
},
};

export default config;


Libs and versions that I'm using:

"@angular/animations": "~17.3.0",
"@angular/common": "~17.3.0",
"@angular/cdk": "^17.3.6",
"@angular/compiler": "~17.3.0",
"@angular/core": "~17.3.0",
"@angular/forms": "~17.3.0",
"@angular/platform-browser": "~17.3.0",
"@angular/platform-browser-dynamic": "~17.3.0",
"@angular/router": "~17.3.0",

"ng-zorro-antd": "^17.4.0",

"@nx/angular": "18.3.3",
"@nx/web": "18.3.3",
"@nx/webpack": "18.3.3",
"@nx/workspace": "18.3.3",
"nx": "18.3.3",


I tried different combinations of strictVersions and requiredVersion but nothing of them worked correctly. Please help me with explanation or a vector of thought that will help me understand what am I doing wrong and why it's not working or maybe a specific solution for this issue

P.S. I tried to implement it with @angular-architects/module-federation and everything works just fine, but I think with NX it will be more useful in our project

Have a nice day!

Continue reading...