fix(webpack-dev-server): add typeRoots to generated tsconfig for angular

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -1,5 +1,4 @@
 import * as fs from 'fs-extra'
-import { tmpdir } from 'os'
 import * as path from 'path'
 import { gte } from 'semver'
 import type { Configuration, RuleSetRule } from 'webpack'
@@ -136,35 +135,25 @@ export async function generateTsConfig (devServerConfig: AngularWebpackDevServer
     includePaths.push(...polyfills.map((p: string) => getProjectFilePath(workspaceRoot, p)))
   }
 
-  const cypressTypes = getProjectFilePath(workspaceRoot, 'node_modules', 'cypress', 'types', 'index.d.ts')
-
-  includePaths.push(cypressTypes)
-
   const tsConfigContent = JSON.stringify({
     extends: getProjectFilePath(projectRoot, buildOptions.tsConfig ?? 'tsconfig.json'),
     compilerOptions: {
       outDir: getProjectFilePath(projectRoot, 'out-tsc/cy'),
       allowSyntheticDefaultImports: true,
       skipLibCheck: true,
+      types: ['cypress'],
     },
     include: includePaths,
-  })
+  }, null, 2)
 
-  const tsConfigPath = path.join(await getTempDir(), 'tsconfig.json')
+  const tsConfigPath = path.join(projectRoot, 'tsconfig.cypress.json')
 
+  // write the tsconfig.cypress.json file to the project root
   await fs.writeFile(tsConfigPath, tsConfigContent)
 
   return tsConfigPath
 }
 
-export async function getTempDir (): Promise<string> {
-  const cypressTempDir = path.join(tmpdir(), 'cypress-angular-ct')
-
-  await fs.ensureDir(cypressTempDir)
-
-  return cypressTempDir
-}
-
 export async function getAngularCliModules (projectRoot: string) {
   let angularVersion: string
 
@@ -272,7 +261,12 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
   // normalize
   const projectConfig = devServerConfig.options?.projectConfig || await getProjectConfig(projectRoot)
 
-  const tsConfig = await generateTsConfig(devServerConfig, projectConfig.buildOptions)
+  const cypressTsConfigPath = path.join(projectRoot, 'tsconfig.cypress.json')
+
+  // check if tsconfig.cypress.json
+  const tsConfig = fs.existsSync(cypressTsConfigPath)
+    ? cypressTsConfigPath
+    : await generateTsConfig(devServerConfig, projectConfig.buildOptions)
 
   const buildOptions = getAngularBuildOptions(projectConfig.buildOptions, tsConfig)
 

npm/webpack-dev-server/test/handlers/angularHandler.spec.ts

@@ -12,7 +12,6 @@ import {
   getAngularCliModules,
   getAngularJson,
   getProjectConfig,
-  getTempDir,
   toPosix,
 } from '../../src/helpers/angularHandler'
 import '../support'
@@ -215,9 +214,8 @@ const expectLoadsAngularBuildOptions = (buildOptions: BuildOptions) => {
 const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerConfig, buildOptions: any) => {
   const { projectRoot } = devServerConfig.cypressConfig
   let tsConfigPath = await generateTsConfig(devServerConfig, buildOptions)
-  const tempDir = await getTempDir()
 
-  expect(tsConfigPath).to.eq(path.join(tempDir, 'tsconfig.json'))
+  expect(tsConfigPath).to.eq(path.join(projectRoot, 'tsconfig.cypress.json'))
 
   let tsConfig = JSON.parse(await fs.readFile(tsConfigPath, 'utf8'))
 
@@ -228,11 +226,11 @@ const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerC
       outDir: toPosix(path.join(projectRoot, 'out-tsc/cy')),
       allowSyntheticDefaultImports: true,
       skipLibCheck: true,
+      types: ['cypress'],
     },
     include: [
       toPosix(path.join(projectRoot, 'src/**/*.cy.ts')),
       toPosix(path.join(projectRoot, 'src/polyfills.ts')),
-      toPosix(path.join(projectRoot, 'node_modules/cypress/types/index.d.ts')),
     ],
   })
 
@@ -256,11 +254,11 @@ const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerC
       outDir: toPosix(path.join(projectRoot, 'out-tsc/cy')),
       allowSyntheticDefaultImports: true,
       skipLibCheck: true,
+      types: ['cypress'],
     },
     include: [
       toPosix(path.join(projectRoot, 'src/**/*.cy.ts')),
       toPosix(supportFile),
-      toPosix(path.join(projectRoot, 'node_modules/cypress/types/index.d.ts')),
     ],
   })
 }