"NG0912: Component ID generation collision detected" when importing from ng-zorro and angular cdk #8480
Description
Describe the bug
Steps to reproduce
Execute the tests by running npm test in the provided reproduction repository.
What is expected?
No warning/error is logged while executing the tests
What is actually happening?
NG0912: Component ID generation collision detected. Components 'CdkVirtualScrollViewport' and 'CdkVirtualScrollViewport' with selector 'cdk-virtual-scroll-viewport' 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 is logged while executing the tests. At regular runtime of the application, I was unable to reproduce the error.
Please provide the exception or error you saw
Other information
The error does not appear if one of the imports in app.component.ts from the cdk or from ng-zorro is removed. Then the test runs without any error.
The tests are executed with vitest.
I assume that somehow during test execution two different versions of the mentioned component are imported. As it is does not happen in production builds, I assume it might be related to the way how vitest resolves the imports
I also raised an issue in ng-zorro in case it is related to the bundle they produce: NG-ZORRO/ng-zorro-antd#9354 and also in @analogjs which is used for setting up the tests for angular: analogjs/analog#1853
Reproduction
https://github.com/troehling/ng0912-component-id-collision
System Info
System:
OS: macOS 15.6.1
CPU: (14) arm64 Apple M4 Pro
Memory: 4.54 GB / 48.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.19.2 - /opt/homebrew/opt/node@20/bin/node
npm: 10.8.2 - /opt/homebrew/opt/node@20/bin/npm
Browsers:
Chrome: 139.0.7258.139
Safari: 18.6
npmPackages:
@vitest/coverage-v8: ^3.0.5 => 3.2.4
@vitest/ui: ^3.0.0 => 3.2.4
vite: ^6.0.0 => 6.2.7
vitest: ^3.2.4 => 3.2.4
Can be reproduced in other environments as well.Used Package Manager
npm
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.