Nx + Module federation + Angular gives error NG0912 when using ng-zorro-antd

[Sir-J]

Current Behavior

Switching between different pages is given us the following warnings:

NG0912: Component ID generation collision detected. Components 'NzSelectClearComponent' and 'NzSelectClearComponent' with selector 'nz-select-clear' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.dev/errors/NG0912
NG0912: Component ID generation collision detected. Components 'NzTextCopyComponent' and 'NzTextCopyComponent' with selector 'nz-text-copy' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.dev/errors/NG0912

Expected Behavior

No warning (for us this warning cause errors in production)

GitHub Repo

nx-mfe-ng-zorro

Steps to Reproduce

1. create angular workspace
2. add to package.json ng-zorro-antd: 18.0.1
3. create host application
4. crate remote application
5. start

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.13.1
OS     : darwin-arm64
npm    : 10.5.2

nx (global)        : 19.0.4
nx                 : 19.4.2
@nx/js             : 19.4.2
@nx/jest           : 19.4.2
@nx/linter         : 19.4.2
@nx/eslint         : 19.4.2
@nx/workspace      : 19.4.2
@nx/angular        : 19.4.2
@nx/cypress        : 19.4.2
@nx/devkit         : 19.4.2
@nx/eslint-plugin  : 19.4.2
@nx/node           : 19.4.2
@nrwl/tao          : 19.4.2
@nx/web            : 19.4.2
@nx/webpack        : 19.4.2
nx-cloud           : 19.0.0
typescript         : 5.4.5
---------------------------------------
Community plugins:
ng-zorro-antd : 18.0.1

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

This issue is reproduced when upgrading Angular and ng-zorro-antd to version 17 and more. In version 16 this problem not reproduced

[Coly010]

This usually happens when there are two components registered to the single Angular instance in the browser from different places.

In other words, if those components come from ng-zorro-antd, then both your host and remote are using their own bundled copy of the library, meaning each instance is trying to register the same component to the single angular runtime.

The library in this case would likely be better to be shared. It should be done automatically, unless you have specifically chosen to opt out of sharing that package.

If you haven't opted out, I will need a reproduction repo to investigate further.

[Sir-J]

This usually happens when there are two components registered to the single Angular instance in the browser from different places.

In other words, if those components come from ng-zorro-antd, then both your host and remote are using their own bundled copy of the library, meaning each instance is trying to register the same component to the single angular runtime.

The library in this case would likely be better to be shared. It should be done automatically, unless you have specifically chosen to opt out of sharing that package.

If you haven't opted out, I will need a reproduction repo to investigate further.

I will try to do this (repo) in nearest weekends

[EnochGao]

similar issue，NzIconService is exported from the tripartite component library

[Sir-J]

@Coly010 I create test repository (see main comment).

How reproduce:
npm run start

In browser you will see:

All information in English.

Then go to remote application and you will see:

A like image, but <nz-empty> component rendering in Chinese (default config).

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { en_US, provideNzI18n } from 'ng-zorro-antd/i18n';
import en from '@angular/common/locales/en';
import { registerLocaleData } from '@angular/common';
registerLocaleData(en);

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(appRoutes),
    provideNzI18n(en_US),
  ],
};

In app.config.ts I set globally English

[Sir-J]

+1

[Coly010]

I know the problem, finding a solution may be a bit tricker.

It's related to the package structure from ng-zorro-antd and it's exports in the root package.json, that we're not finding the secondary entry points to share them correctly

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.