Cypress Component Testing for Angular logs many TypeScript warnings

[Waterstraal]

Current behavior

When starting Cypress Component Testing in a fresh Angular project, it logs many warnings:

WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/cypress/e2e/spec.cy.ts is part of the TypeScript compilation
 but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/src/app/app.component.ts is part of the TypeScript compilati
on but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/src/app/app.module.ts is part of the TypeScript compilation 
but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/src/main.ts is part of the TypeScript compilation but it's u
nused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Desired behavior

Cypress should be configured correctly so that we don't see any warning in the console.

Test code to reproduce

1. Create a new Angular project: ng new cypress-component-testing-typescript-warnings --inline-style --inline-template --minimal --routing false
2. Run ng e2e and add Cypress component testing
3. Run cypress open --component --browser chrome
4. Confirm that several warnings are logged:

   
   WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/cypress/e2e/spec.cy.ts is part of the TypeScript compilation
   but it's unused.
   Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/src/app/app.component.ts is part of the TypeScript compilati on but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/src/app/app.module.ts is part of the TypeScript compilation but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in C:/Sandboxes/Experiments/cypress-component-testing-typescript-warnings/src/main.ts is part of the TypeScript compilation but it's u nused. Add only entry points to the 'files' or 'include' properties in your tsconfig.

### Cypress Version

12.9.0

### Node version

18.14.2

### Operating System

Win10

### Debug Logs

_No response_

### Other

_No response_

[julienbourgainpro]

I had the same issue on a large app (~10000 ts files) and cypress takes some minutes to launch a single test with so much warning about unused compiled code.

I think cypress launch an angular debug server for component testing and use the tsconfig.app.json specified in angular.json in build or serve part.

It can be helpful if cypress can use a specific tsconfig by convention like with E2E testing

I have done a quick reverse engineering, so if i rename tsconfig.app.json, i had this stacktrace at launch :

Error: error TS5012: Cannot read file '/home/me/projects/web/tsconfig.app.json': ENOENT: no such file or directory, open '/home/me/projects/web/tsconfig.app.json'.
    at readTsconfig (/home/packages/angular_devkit/build_angular/src/utils/read-tsconfig.ts:35:11)
    at async generateWebpackConfig (/home/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts:43:20)
    at async generateBrowserWebpackConfigFromContext (/home/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts:155:18)
    at async getAngularCliWebpackConfig (/home/me/.cache/Cypress/12.8.1/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:145:24)
    at async angularHandler (/home/me/.cache/Cypress/12.8.1/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:180:27)
    at async getPreset (/home/me/.cache/Cypress/12.8.1/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:91:20)
    at async Function.devServer.create (/home/me/.cache/Cypress/12.8.1/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:108:61)
    at async /home/me/.cache/Cypress/12.8.1/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:25:24
 ELIFECYCLE  Command failed with exit code 1.

[erikmom]

Any news on this issue jordanpowell88? While for a small project it is maybe not noticable in start-up time, but on larger projects it is actually quite some time that we have to wait before we can start using it.

[db984]

Add webpackConfig: { stats: "errors-only" } to the cypress.config.ts file component configuration:

   component: {
        devServer: {
            framework: "angular",
            bundler: "webpack",
            webpackConfig: { stats: "errors-only" }  // add this line to suppress webpack warnings
        },
        supportFile: false,
        specPattern: "**/*.cy.ts",
   }

It's a work-around and not a proper fix. I'm not sure if there are any warnings from webpack when running angular component tests that genuinely need attention, but if there are we weren't seeing them anyway under the 1000 line floods of these warnings. So I'm suppressing all of them for now. We can always remove the line now and then to review the full output.

[Avcajaraville]

Damn, I spent hours looking into this till I saw this issue. Guess I'll subscribe :D