Angular NG0912 Warning: Component ID generation collision detected after upgrading to angular 17

Question

I recently upgraded my Angular project to version 17, and now I'm encountering many browser console warnings like the following messages.

NG0912: Component ID generation collision detected. Components 'DevDashboardComponent' and 'DevDashboardComponent' with selector 'lib-dev-dashboard-page' 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.io/errors/NG0912

NG0912: Component ID generation collision detected. Components 'ScrollerComponent' and 'ScrollerComponent' with selector 'datatable-scroller' 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.io/errors/NG0912

Despite having different selector IDs for each library in my Angular project, these warnings persist. These warnings didn't appear before the upgrade.

However, after building the project using ng build and running it, the warnings doesn't appear.

Is there any specific configuration or setting that needs to be adjusted after upgrading to Angular 17 to prevent this warning?

Answer 1

I just ran into this problem as well while upgrading to v17.

This is a problem with npm packages being imported in multiple projects when they are not needed, leading to the same component being imported multiple times.

For me, I was importing @ng-bootstrap/ng-bootstrap into my main project, then importing it again in another inner package.json when this was not needed. All I had to do was uninstall from that inner package.json and my problems were solved.

MyClient
|
|__ libs
|     |___ core
|     |
|     |___ ui
|           |____ package.json (also contains @ng-bootstrap and needs to be removed)
|
| package.json (contains @ng-bootstrap/ng-bootstrap)

Fix collisions of components that are defined in npm packages

1. Find which package is defining this component.
2. Check all your packages to see if this is defined in any inner packages.
3. Change directory to the directory containing the inner package.json
4. Run npm uninstall {package name} to uninstall the package.

Fix collisions of components that are defined by you

1. Find which modules have this component in the declarations section.
2. Ensure that no modules are both importing another module that is declaring this component, and simultaneously declaring this component themselves.
3. If there are any, delete the component declaration and keep the module import.