feat: enable Angular CT support (#23089)

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

packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts

@@ -108,8 +108,7 @@ describe('scaffolding component testing', {
     })
   })
 
-  // TODO: revert once Angular is slated for release
-  context.skip('angular-cli-unconfigured', () => {
+  context('angular-cli-unconfigured', () => {
     it('scaffolds component testing for Angular', () => {
       startSetupFor('angular-cli-unconfigured')
 

packages/launchpad/src/utils/icons.ts

@@ -4,7 +4,7 @@ import LogoNext from '../images/logos/nextjs.svg'
 import LogoNuxt from '../images/logos/nuxt.svg'
 import LogoVue from '../images/logos/vue.svg'
 import LogoReact from '../images/logos/react.svg'
-// import LogoAngular from '../images/logos/angular.svg'
+import LogoAngular from '../images/logos/angular.svg'
 
 import type { FrontendFrameworkEnum, SupportedBundlers } from '../generated/graphql'
 
@@ -19,6 +19,5 @@ export const FrameworkBundlerLogos: Record<FrontendFrameworkEnum | SupportedBund
   nuxtjs: LogoNuxt,
   react: LogoReact,
   reactscripts: LogoReact,
-  // TODO: revert once Angular is slated for release
-  // angular: LogoAngular,
+  angular: LogoAngular,
 }

packages/scaffold-config/src/frameworks.ts

@@ -219,27 +219,26 @@ export const WIZARD_FRAMEWORKS = [
     supportStatus: 'full',
     componentIndexHtml: componentIndexHtmlGenerator(),
   },
-  // TODO: revert once Angular is slated for release
-  // {
-  //   type: 'angular',
-  //   configFramework: 'angular',
-  //   category: 'template',
-  //   name: 'Angular',
-  //   detectors: [dependencies.WIZARD_DEPENDENCY_ANGULAR_CLI],
-  //   supportedBundlers: [dependencies.WIZARD_DEPENDENCY_WEBPACK],
-  //   dependencies: (bundler: WizardBundler['type'], projectPath: string): DependencyToInstall[] => {
-  //     return [
-  //       isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_CLI, projectPath),
-  //       isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR, projectPath),
-  //       isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_CORE, projectPath),
-  //       isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_COMMON, projectPath),
-  //       isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC, projectPath),
-  //     ]
-  //   },
-  //   codeGenFramework: 'angular',
-  //   mountModule: 'cypress/angular',
-  //   supportStatus: 'full',
-  //   componentIndexHtml: componentIndexHtmlGenerator(),
-  //   specPattern: '**/*.cy.ts',
-  // },
+  {
+    type: 'angular',
+    configFramework: 'angular',
+    category: 'template',
+    name: 'Angular',
+    detectors: [dependencies.WIZARD_DEPENDENCY_ANGULAR_CLI],
+    supportedBundlers: [dependencies.WIZARD_DEPENDENCY_WEBPACK],
+    dependencies: (bundler: WizardBundler['type'], projectPath: string): Promise<DependencyToInstall[]> => {
+      return Promise.all([
+        isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_CLI, projectPath),
+        isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR, projectPath),
+        isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_CORE, projectPath),
+        isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_COMMON, projectPath),
+        isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC, projectPath),
+      ])
+    },
+    codeGenFramework: 'angular',
+    mountModule: 'cypress/angular',
+    supportStatus: 'full',
+    componentIndexHtml: componentIndexHtmlGenerator(),
+    specPattern: '**/*.cy.ts',
+  },
 ] as const

packages/scaffold-config/test/unit/detect.spec.ts

@@ -205,8 +205,7 @@ describe('detectFramework', () => {
   })
 
   ;['13.0.0', '14.0.0'].forEach((v) => {
-    // TODO: revert once Angular is slated for release
-    it.skip(`Angular CLI v${v}`, async () => {
+    it(`Angular CLI v${v}`, async () => {
       const projectPath = await scaffoldMigrationProject('angular-cli-unconfigured')
 
       fakeDepsInNodeModules(projectPath, [