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

* feat(webpack-dev-server): generate a local tsconfig file

* chore: remove comments

* chore: use relative paths

* test(webpack-dev-server): update tsconfig tests

* test(webpack-dev-server): update tsconfig tests

* test(webpack-dev-server): update tsconfig tests

* test(webpack-dev-server): upt outDir path

* chore: build binary

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

Co-authored-by: Stokes Player <[email protected]>

* fix(webpack-dev-server): use tmp but add typeRoots

* chore: update workflow to build binary

* remove redundant node_modules/types

* remove node_modules/types from assertions

---------

Co-authored-by: Stokes Player <[email protected]>

Author: jordanpowell88

.circleci/workflows.yml

@@ -30,7 +30,8 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'chore/use_cloud_m1_runners'
+        - 'jordanpowell88/angular-tsconfig'
+        - 'fix/chrome_crash_recovery'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -41,7 +42,8 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
+    - equal: ['jordanpowell88/angular-tsconfig', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/issue-26900_browserCriClient', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -52,7 +54,8 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
+    - equal: [ 'jordanpowell88/angular-tsconfig', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/issue-26900_browserCriClient', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -142,7 +145,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" && "$CIRCLE_BRANCH" != "mschile/issue-26900_browserCriClient" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" && "$CIRCLE_BRANCH" != "jordanpowell88/angular-tsconfig" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

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

@@ -136,19 +136,23 @@ 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')
+  const typeRoots = [
+    getProjectFilePath(workspaceRoot, 'node_modules'),
+  ]
 
-  includePaths.push(cypressTypes)
+  const types = ['cypress']
 
   const tsConfigContent = JSON.stringify({
     extends: getProjectFilePath(projectRoot, buildOptions.tsConfig ?? 'tsconfig.json'),
     compilerOptions: {
       outDir: getProjectFilePath(projectRoot, 'out-tsc/cy'),
       allowSyntheticDefaultImports: true,
       skipLibCheck: true,
+      types,
+      typeRoots,
     },
     include: includePaths,
-  })
+  }, null, 2)
 
   const tsConfigPath = path.join(await getTempDir(), 'tsconfig.json')
 

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

@@ -19,29 +19,24 @@ import '../support'
 import { scaffoldMigrationProject } from '../test-helpers/scaffoldProject'
 
 chai.use(chaiPromise)
-
 describe('angularHandler', function () {
   this.timeout(1000 * 60)
-
   it('sources the config from angular-13', async () => {
     const projectRoot = await scaffoldMigrationProject('angular-13')
 
     process.chdir(projectRoot)
-
     const devServerConfig = {
       cypressConfig: {
         projectRoot,
         specPattern: 'src/**/*.cy.ts',
       } as Cypress.PluginConfigOptions,
       framework: 'angular',
     } as AngularWebpackDevServerConfig
-
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)
 
     expect(webpackConfig).to.exist
     expect((webpackConfig?.entry as any).main).to.be.undefined
     expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))
-
     const { buildOptions } = await expectNormalizeProjectConfig(projectRoot)
 
     await expectLoadsAngularJson(projectRoot)
@@ -54,21 +49,18 @@ describe('angularHandler', function () {
     const projectRoot = await scaffoldMigrationProject('angular-14')
 
     process.chdir(projectRoot)
-
     const devServerConfig = {
       cypressConfig: {
         projectRoot,
         specPattern: 'src/**/*.cy.ts',
       } as Cypress.PluginConfigOptions,
       framework: 'angular',
     } as AngularWebpackDevServerConfig
-
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)
 
     expect(webpackConfig).to.exist
     expect((webpackConfig?.entry as any).main).to.be.undefined
     expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))
-
     const { buildOptions } = await expectNormalizeProjectConfig(projectRoot)
 
     await expectLoadsAngularJson(projectRoot)
@@ -81,21 +73,18 @@ describe('angularHandler', function () {
     const projectRoot = await scaffoldMigrationProject('angular-15')
 
     process.chdir(projectRoot)
-
     const devServerConfig = {
       cypressConfig: {
         projectRoot,
         specPattern: 'src/**/*.cy.ts',
       } as Cypress.PluginConfigOptions,
       framework: 'angular',
     } as AngularWebpackDevServerConfig
-
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)
 
     expect(webpackConfig).to.exist
     expect((webpackConfig?.entry as any).main).to.be.undefined
     expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))
-
     const { buildOptions } = await expectNormalizeProjectConfig(projectRoot)
 
     await expectLoadsAngularJson(projectRoot)
@@ -129,7 +118,6 @@ describe('angularHandler', function () {
     const projectRoot = await scaffoldMigrationProject('angular-custom-config')
 
     process.chdir(projectRoot)
-
     const devServerConfig = {
       framework: 'angular',
       cypressConfig: {
@@ -140,13 +128,11 @@ describe('angularHandler', function () {
         projectConfig: customProjectConfig,
       },
     } as unknown as AngularWebpackDevServerConfig
-
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)
 
     expect(webpackConfig).to.exist
     expect((webpackConfig?.entry as any).main).to.be.undefined
     expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))
-
     await expectLoadsAngularJson(projectRoot)
     await expectLoadsAngularCLiModules(projectRoot)
     await expectGeneratesTsConfig(devServerConfig, customProjectConfig.buildOptions)
@@ -181,28 +167,22 @@ const expectNormalizeProjectConfig = async (projectRoot: string) => {
 
   return projectConfig
 }
-
 const expectLoadsAngularJson = async (projectRoot: string) => {
   const angularJson = await getAngularJson(projectRoot)
 
   expect(angularJson).to.not.be.null
-
   await expect(getAngularJson(path.join('..', projectRoot))).to.be.rejected
 }
-
 const expectLoadsAngularCLiModules = async (projectRoot: string) => {
   const angularCliModules = await getAngularCliModules(projectRoot)
 
   expect(angularCliModules.generateBrowserWebpackConfigFromContext).to.not.be.null
   expect(angularCliModules.getStylesConfig).to.not.be.null
   expect(angularCliModules.getCommonConfig).to.not.be.null
-
   await expect(getAngularCliModules(path.join('..', projectRoot))).to.be.rejected
 }
-
 const expectLoadsAngularBuildOptions = (buildOptions: BuildOptions) => {
   const tsConfig = 'tsconfig.cypress.json'
-
   let finalBuildOptions = getAngularBuildOptions(buildOptions, tsConfig)
 
   expect(finalBuildOptions.aot).to.be.false
@@ -211,7 +191,6 @@ const expectLoadsAngularBuildOptions = (buildOptions: BuildOptions) => {
   expect(finalBuildOptions.outputHashing).to.equal('none')
   expect(finalBuildOptions.budgets).to.be.undefined
 }
-
 const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerConfig, buildOptions: any) => {
   const { projectRoot } = devServerConfig.cypressConfig
   let tsConfigPath = await generateTsConfig(devServerConfig, buildOptions)
@@ -228,11 +207,16 @@ const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerC
       outDir: toPosix(path.join(projectRoot, 'out-tsc/cy')),
       allowSyntheticDefaultImports: true,
       skipLibCheck: true,
+      typeRoots: [
+        toPosix(path.join(projectRoot, 'node_modules')),
+      ],
+      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 +240,16 @@ const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerC
       outDir: toPosix(path.join(projectRoot, 'out-tsc/cy')),
       allowSyntheticDefaultImports: true,
       skipLibCheck: true,
+      typeRoots: [
+        toPosix(path.join(projectRoot, 'node_modules')),
+      ],
+      types: [
+        'cypress',
+      ],
     },
     include: [
       toPosix(path.join(projectRoot, 'src/**/*.cy.ts')),
       toPosix(supportFile),
-      toPosix(path.join(projectRoot, 'node_modules/cypress/types/index.d.ts')),
     ],
   })
 }