Nx + Module federation + Angular gives error NG0912 when using ng-zorro-antd
Sir-J opened this issue · comments
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
No response
Steps to Reproduce
- create angular workspace
- add to package.json
ng-zorro-antd
:18.0.1
- create host application
- crate remote application
- 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
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.
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
similar issue,NzIconService is exported from the tripartite component library