feat: enable Angular CT support (#23089)

Author: ZachJW34

cli/package.json

@@ -107,7 +107,8 @@
     "vue",
     "react",
     "vue2",
-    "react18"
+    "react18",
+    "angular"
   ],
   "bin": {
     "cypress": "bin/cypress"
@@ -149,6 +150,11 @@
     "./mount-utils": {
       "require": "./mount-utils/dist/index.js",
       "types": "./mount-utils/dist/index.d.ts"
+    },
+    "./angular": {
+      "import": "./angular/dist/index.js",
+      "require": "./angular/dist/index.js",
+      "types": "./angular/dist/index.d.ts"
     }
   },
   "workspaces": {

cli/scripts/post-build.js

@@ -12,6 +12,7 @@ const npmModulesToCopy = [
   'react18',
   'vue',
   'vue2',
+  'angular',
 ]
 
 npmModulesToCopy.forEach((folder) => {

cli/types/cypress.d.ts

@@ -3044,7 +3044,7 @@ declare namespace Cypress {
 
   type DevServerConfigOptions = {
     bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next' | 'angular'
     webpackConfig?: PickConfigOpt<'webpackConfig'>
   } | {
     bundler: 'vite'

npm/angular/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "tsc || echo 'built, with type errors'",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "build-prod": "yarn build",
     "check-ts": "tsc --noEmit"
   },

npm/webpack-dev-server/cypress/e2e/angular.cy.ts

@@ -12,8 +12,7 @@ for (const project of WEBPACK_REACT) {
     continue
   }
 
-  // TODO: revert once Angular is slated for release
-  describe.skip(`Working with ${project}`, () => {
+  describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
       cy.openProject(project)

npm/webpack-dev-server/src/devServer.ts

@@ -12,6 +12,7 @@ import { nuxtHandler } from './helpers/nuxtHandler'
 import { createReactAppHandler } from './helpers/createReactAppHandler'
 import { nextHandler } from './helpers/nextHandler'
 import { sourceDefaultWebpackDependencies, SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
+import { angularHandler } from './helpers/angularHandler'
 
 const debug = debugLib('cypress:webpack-dev-server:devServer')
 
@@ -25,7 +26,7 @@ export type WebpackDevServerConfig = {
   webpackConfig?: unknown // Derived from the user's webpack
 }
 
-export const ALL_FRAMEWORKS = ['create-react-app', 'nuxt', 'react', 'vue-cli', 'next', 'vue'] as const
+export const ALL_FRAMEWORKS = ['create-react-app', 'nuxt', 'react', 'vue-cli', 'next', 'vue', 'angular'] as const
 
 /**
  * @internal
@@ -115,9 +116,8 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
     case 'next':
       return await nextHandler(devServerConfig)
 
-      // TODO: revert once Angular is slated for release
-      // case 'angular':
-      //   return await angularHandler(devServerConfig)
+    case 'angular':
+      return await angularHandler(devServerConfig)
 
     case 'react':
     case 'vue':

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

@@ -65,8 +65,7 @@ const frameworkWebpackMapper: FrameworkWebpackMapper = {
   react: undefined,
   vue: undefined,
   next: 'next',
-  // TODO: revert once Angular is slated for release
-  // 'angular': '@angular-devkit/build-angular',
+  'angular': '@angular-devkit/build-angular',
 }
 
 // Source the users framework from the provided projectRoot. The framework, if available, will serve

npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts

@@ -38,9 +38,8 @@ export function makeDefaultWebpackConfig (
     plugins: [
       new HtmlWebpackPlugin({
         template: indexHtmlFile,
-        // TODO: revert once Angular is slated for release
         // Angular generates all of it's scripts with <script type="module">. Live-reloading breaks without this option.
-        // ...(config.devServerConfig.framework === 'angular' ? { scriptLoading: 'module' } : {}),
+        ...(config.devServerConfig.framework === 'angular' ? { scriptLoading: 'module' } : {}),
       }),
     ],
   } as any

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

@@ -40,8 +40,7 @@ const projectConfig: AngularJsonProjectConfig = {
   },
 }
 
-// TODO: revert once Angular is slated for release
-describe.skip('angularHandler', function () {
+describe('angularHandler', function () {
   this.timeout(1000 * 60)
 
   it('sources the config from angular-13', async () => {
@@ -54,7 +53,7 @@ describe.skip('angularHandler', function () {
         projectRoot,
         specPattern: 'src/**/*.cy.ts',
       } as Cypress.PluginConfigOptions,
-      // framework: 'angular',
+      framework: 'angular',
     } as WebpackDevServerConfig
 
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)
@@ -79,7 +78,7 @@ describe.skip('angularHandler', function () {
         projectRoot,
         specPattern: 'src/**/*.cy.ts',
       } as Cypress.PluginConfigOptions,
-      // framework: 'angular',
+      framework: 'angular',
     } as WebpackDevServerConfig
 
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)

packages/graphql/schemas/schema.graphql

@@ -871,6 +871,7 @@ type FileParts implements Node {
 }
 
 enum FrontendFrameworkEnum {
+  angular
   nextjs
   nuxtjs
   react