Hi there. I've got an issue with an Angular application when I run my component tests with cypress run --component. The tests work fine, the result is also correct. But: the log shows some TypeScript errors before the successful test results:

ERROR in src/app/xxx....xxx.service.ts:1471:37 - error TS2339: Property 'remove' does not exist on type 'MyClass[]'.

I configured the typeRoots in my tsconfig.json to tell TS about my extension method remove for arrays:

json
    "typeRoots": [
      "node_modules/@types",
      "app/extensions/@types" <--- contains remove
    ],

Has anybody had the same issue? Is a configuration missing? As I mentioned before, these errors don't effect the functionality of the test run, but it's a bit annoying to have hundreds of them in the output.

Hey @some-electrician-52054 What version of Angular are you using?

Thanks for your reply. I should have included this information in my post. My app runs with Angular 15.0.1.

That is strange....can you exclude

**.service.ts

from your tsconfig?

There are a lot of services and components that use the array extensions (that's why I get ~50 errors). I'll test that and try to provide more information (tomorrow).

Ok thanks

I had no success with the exclude your suggestion. But I could reproduce the behaviour with a new project: - create new Angular 15 project - run ng e2e to add cypress with component testing - add /src/app/extensions/extensions.ts

typescript
export function addExtensions(): void {
    if (!Array.prototype.single) {
        Array.prototype.single = function () {
            if (this.length === 0) {
                throw new Error("array contains no matching elements");
            }

            if (this.length > 1) {
                throw new Error("array contains more than one element");
            }

            return this[0];
        };
    }
}

- add /src/app/extensions/types/extensions.d.ts

typescript
interface Array<T> {
    single(): T;
}

- call addExtensions() in component.ts

typescript
import { addExtensions } from '../../src/app/extensions/extensions';
addExtensions();

- create new component "DemoComponent" add public field to class src/app/demo/demo.component.ts that uses extension method

typescript
export class DemoComponent {
  public value = [1].single();
}

- Set html-template to Value: {{ value }} - create test app/demo/demo.component.cy.ts

typescript
import { DemoComponent } from "./demo.component";

describe("DemoComponent", () => {
  it(`should create`, () => {
    cy.mount(DemoComponent);
  });
});

- run ng e2e --component Result:

√ Compiled successfully.

asset cypress-support-file.js 8.1 MiB {cypress-support-file} [emitted] (name: cypress-support-file)
...
chunk {cypress-entry} (runtime: runtime) cypress-entry.js (cypress-entry) 196 KiB [initial]
9   public value = [1].single();
                       ~~~~~~

ERROR in src/app/extensions/extensions.ts:2:26 - error TS2339: Property 'single' does not exist on type 'any[]'.      

2     if (!Array.prototype.single) {
                           ~~~~~~

The app compiles and the test runs successfully.