Angular (v16) + Spectator/Jest reports "NG0912 Component ID generation collision detected" in basic component test
localpcguy opened this issue · 3 comments
Is this a regression?
Hard to say because I upgraded Angular and Spectator, and converted to Jest. Prior to that, the test was passing fine, but as noted below, Angular v15 did not have this warning. So a lot of changes make it hard to say for sure if it's a regression or not.
Description
Vey basic component with the generated test is reporting a warning "NG0912 Component ID generation collision detected ..." when running Jest tests via Spectator. If I replace the component's test with a TestBed (standard Angular version), it does not cause that warning to be generated. The only difference between the Spectator component spec schematic and the component in question is that the component needs to import a module for access to some other components.
This is a warning that was added as part of Angular v16, and there's already an issue thread about possible false positives, but since I could not replicate this with a standard test but only with a Spectator test, I don't think it's specifically related to the issues in that thread (in addition, that issue dealt with multiple components that didn't have a selector and this is just a single component that is unique in the workspace). However, it's possible this problem "resolves" itself when/if changes are made related to the Angular issue.
Other information: It is in an Nx workspace, which might be an added wrinkle, but again, since it was not replicable with a standard TestBed test, it seems like it has something to do with the syntactic sugar that Spectator provides. Ran into some roadblocks attempting to replicate it in StackBlitz as I couldn't get a similar environment setup in the time I had.
If it's something I can help fix, I am willing to help, but didn't see a clear reason for this to be happening.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
NG0912: Component ID generation collision detected. Components 'MyDemoComponent' and 'MyDemoComponent' with selector 'my-demo' 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
Please provide the environment you discovered this bug in
Nx v16, Angular v16, Jest v29, Spectator v15 (latest)
Anything else?
Stack Trace (component name changed, but untouched other than that)
console.warn
NG0912: Component ID generation collision detected. Components 'ASimpleComponent' and 'ASimpleComponent' with selector 'a-simple-component' 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
at getComponentId (../../node_modules/@angular/core/fesm2022/core.mjs:1955:25)
at Object.toString (../../node_modules/@angular/core/fesm2022/core.mjs:1650:18)
at noSideEffects (../../node_modules/@angular/core/fesm2022/core.mjs:850:29)
at ɵɵdefineComponent (../../node_modules/@angular/core/fesm2022/core.mjs:1620:12)
at fn (ng:/ASimpleComponent.js:106:12)
at JitEvaluator.executeFunction (../../node_modules/@angular/compiler/fesm2022/compiler.mjs:5510:16)
at JitEvaluator.evaluateCode (../../node_modules/@angular/compiler/fesm2022/compiler.mjs:5497:21)
at JitEvaluator.evaluateStatements (../../node_modules/@angular/compiler/fesm2022/compiler.mjs:5466:21)
at CompilerFacadeImpl.jitExpression (../../node_modules/@angular/compiler/fesm2022/compiler.mjs:23014:39)
at CompilerFacadeImpl.compileComponentFromMeta (../../node_modules/@angular/compiler/fesm2022/compiler.mjs:22971:21)
at CompilerFacadeImpl.compileComponent (../../node_modules/@angular/compiler/fesm2022/compiler.mjs:22960:21)
at Function.get (../../node_modules/@angular/core/fesm2022/core.mjs:24819:34)
at getComponentDef (../../node_modules/@angular/core/fesm2022/core.mjs:1840:12)
at ../../node_modules/@angular/core/fesm2022/core.mjs:24578:34
at Array.forEach (<anonymous>)
at setScopeOnDeclaredComponents (../../node_modules/@angular/core/fesm2022/core.mjs:24573:18)
at flushModuleScopingQueueAsMuchAsPossible (../../node_modules/@angular/core/fesm2022/core.mjs:24236:21)
at Function.get (../../node_modules/@angular/core/fesm2022/core.mjs:24841:21)
at getComponentDef (../../node_modules/@angular/core/fesm2022/core.mjs:1840:12)
at isStandalone (../../node_modules/@angular/core/fesm2022/core.mjs:1857:17)
at declareInModule (../../node_modules/@ngneat/spectator/fesm2022/ngneat-spectator.mjs:295:9)
at initialSpectatorModule (../../node_modules/@ngneat/spectator/fesm2022/ngneat-spectator.mjs:1311:9)
at createComponentFactory$1 (../../node_modules/@ngneat/spectator/fesm2022/ngneat-spectator.mjs:1501:28)
at createComponentFactory (../../node_modules/@ngneat/spectator/fesm2022/ngneat-spectator-jest.mjs:39:12)
at src/app/shared/components/a-simple-component/a-simple.component.spec.ts:8:49
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:421:30)
at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:175:47)
at ../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3557:33
at context.<computed> (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3600:39)
at Object.<anonymous> (src/app/shared/components/a-simple-component/a-simple.component.spec.ts:6:1)
Do you want to create a pull request?
Yes
Had the exact same thing in our lib. After a week of searching I finally found that in one of our tests we imported a module form the lib itself like this:
import { SelectModule } from '@ourlib';
should have been
import {SelectModule } from "./src/select/select.module"
This made the test build two libs at the same time so the duplication of id was true. The warning however didnt say anything about a circular dependency..... XD
Maybe you have the same, only took one test to import it wrong to make all test get the same duplication of id error....
Thanks! We do use TS Paths in our imports (but libs have an issue where internally they have to be relative), and I wouldn't be surprised if something like that crept in somewhere, so it's great to have something to look for. I was trying again to get a replication setup in Stackblitz late yesterday and couldn't replicate this on a simple (Angular/Jest/Spectator but no Nx) setup, however it wasn't using the path imports, so that could very well be the difference. I'll report back if I find that is the issue.
Came back to this a week later and while I didn't specifically find any instances where TS Paths were incorrect, other changes made seems to have caused this to stop occurring. As I can't replicate it on a basic setup and can no longer replicate it on our project, I'm guessing it was related to something pretty specific to how our project is setup, so going to close. If I do run into it again and find it is specifically related to something here and not the aforementioned Angular bug, I'll report back.