{
  "doc": {
    "id": "app/component-testing/angular/overview",
    "title": "Angular Component Testing",
    "description": "Learn how to set up component tests in Angular and configure Cypress for Angular projects.",
    "section": "app",
    "source_path": "/llm/markdown/app/component-testing/angular/overview.md",
    "version": "e6988a974973e9090ce70406c38cb2b9e0eac9fa",
    "updated_at": "2026-05-15T15:50:22.536Z",
    "headings": [
      {
        "id": "app/component-testing/angular/overview#angular-component-testing",
        "text": "Angular Component Testing",
        "level": 1
      },
      {
        "id": "app/component-testing/angular/overview#what-youll-learn",
        "text": "What you'll learn",
        "level": 5
      },
      {
        "id": "app/component-testing/angular/overview#framework-support",
        "text": "Framework Support",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#tutorial",
        "text": "Tutorial",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#installation",
        "text": "Installation",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#framework-configuration",
        "text": "Framework Configuration",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#angular-cli-configuration",
        "text": "Angular CLI Configuration",
        "level": 3
      },
      {
        "id": "app/component-testing/angular/overview#options-api",
        "text": "Options API",
        "level": 4
      },
      {
        "id": "app/component-testing/angular/overview#sample-angular-apps",
        "text": "Sample Angular Apps",
        "level": 4
      }
    ]
  },
  "chunks": [
    {
      "id": "app/component-testing/angular/overview#framework-support",
      "doc_id": "app/component-testing/angular/overview",
      "heading": "Framework Support",
      "heading_level": 2,
      "content_markdown": "## Framework Support\n\nCypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, `^20.0.0`, and `^21.0.0`.\n\nOur testing harness, `cypress/angular`, still requires `zone.js` and `@angular-devkit/build-angular` to be installed in your project, even if your project is zoneless or is built with `@angular/build`. If you wish to use the zoneless configuration, which is the default in Angular 21, you can use `cypress/angular-zoneless` testing harness instead as of Cypress `15.8.0`.\n",
      "section": "app",
      "anchors": [
        "framework-support"
      ],
      "path": "/llm/json/chunked/app/component-testing/angular/overview.json",
      "token_estimate": 87
    },
    {
      "id": "app/component-testing/angular/overview#installation",
      "doc_id": "app/component-testing/angular/overview",
      "heading": "Installation",
      "heading_level": 2,
      "content_markdown": "## Installation\n\nTo get up and running with Cypress Component Testing in Angular, install Cypress into your project:\n\n*   npm\n*   yarn\n*   pnpm\n\n```\nnpm install cypress --save-dev\n```\n\n```\nyarn add cypress --dev\n```\n\n```\npnpm add --save-dev cypress\n```\n\nOpen Cypress:\n\n*   npm\n*   yarn\n*   pnpm\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\nChoose Component Testing\n\nThe Cypress App will guide you through configuring your project.\n\nFor a step-by-step guide on how to create a component test, refer to the [Getting Started](/llm/markdown/app/component-testing/get-started.md) guide.\n\nFor usage and examples, visit the [Angular Examples](/llm/markdown/app/component-testing/angular/examples.md) guide.\n",
      "section": "app",
      "anchors": [
        "installation"
      ],
      "path": "/llm/json/chunked/app/component-testing/angular/overview.json",
      "token_estimate": 139
    },
    {
      "id": "app/component-testing/angular/overview#framework-configuration",
      "doc_id": "app/component-testing/angular/overview",
      "heading": "Framework Configuration",
      "heading_level": 2,
      "content_markdown": "## Framework Configuration\n\nCypress Component Testing works out of the box with `@angular/cli` projects. Cypress will automatically detect your project is Angular during setup and configure it properly. The examples below are for reference purposes.\n\n### Angular CLI Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',    },    specPattern: '**/*.cy.ts',  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',    },    specPattern: '**/*.cy.ts',  },})\n```\n\n#### Options API\n\nYou can also use the `options` API to provide your own project specific configuration to your `devServer`. The `devServer` configuration receives an `options` property:\n\n```\nimport { defineConfig } from 'cypress'export default {  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',      options: {        projectConfig: {          root: '',          sourceRoot: 'apps/my-app',          buildOptions: {            outputPath: 'dist/my-app',            index: 'apps/my-app/src/index.html',            main: 'apps/my-app/src/main.ts',            polyfills: 'apps/my-app/src/polyfills.ts',            tsConfig: 'apps/my-app/tsconfig.app.json',            inlineStyleLanguage: 'scss',            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],            styles: ['apps/my-app/src/styles.scss'],            scripts: [],            buildOptimizer: false,            optimization: false,            vendorChunk: true,            extractLicenses: false,            sourceMap: true,            namedChunks: true,          },        },      },    },  },}\n```\n\n#### Sample Angular Apps\n\n*   [Angular 20 Standalone](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-standalone)\n*   [Angular 21 Zoneless](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-zoneless)\n",
      "section": "app",
      "anchors": [
        "framework-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/angular/overview.json",
      "token_estimate": 253
    },
    {
      "id": "app/component-testing/angular/overview#angular-cli-configuration",
      "doc_id": "app/component-testing/angular/overview",
      "heading": "Angular CLI Configuration",
      "heading_level": 3,
      "content_markdown": "### Angular CLI Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',    },    specPattern: '**/*.cy.ts',  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',    },    specPattern: '**/*.cy.ts',  },})\n```\n\n#### Options API\n\nYou can also use the `options` API to provide your own project specific configuration to your `devServer`. The `devServer` configuration receives an `options` property:\n\n```\nimport { defineConfig } from 'cypress'export default {  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',      options: {        projectConfig: {          root: '',          sourceRoot: 'apps/my-app',          buildOptions: {            outputPath: 'dist/my-app',            index: 'apps/my-app/src/index.html',            main: 'apps/my-app/src/main.ts',            polyfills: 'apps/my-app/src/polyfills.ts',            tsConfig: 'apps/my-app/tsconfig.app.json',            inlineStyleLanguage: 'scss',            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],            styles: ['apps/my-app/src/styles.scss'],            scripts: [],            buildOptimizer: false,            optimization: false,            vendorChunk: true,            extractLicenses: false,            sourceMap: true,            namedChunks: true,          },        },      },    },  },}\n```\n\n#### Sample Angular Apps\n\n*   [Angular 20 Standalone](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-standalone)\n*   [Angular 21 Zoneless](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-zoneless)\n",
      "section": "app",
      "anchors": [
        "angular-cli-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/angular/overview.json",
      "token_estimate": 207
    },
    {
      "id": "app/component-testing/angular/overview#options-api",
      "doc_id": "app/component-testing/angular/overview",
      "heading": "Options API",
      "heading_level": 4,
      "content_markdown": "#### Options API\n\nYou can also use the `options` API to provide your own project specific configuration to your `devServer`. The `devServer` configuration receives an `options` property:\n\n```\nimport { defineConfig } from 'cypress'export default {  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',      options: {        projectConfig: {          root: '',          sourceRoot: 'apps/my-app',          buildOptions: {            outputPath: 'dist/my-app',            index: 'apps/my-app/src/index.html',            main: 'apps/my-app/src/main.ts',            polyfills: 'apps/my-app/src/polyfills.ts',            tsConfig: 'apps/my-app/tsconfig.app.json',            inlineStyleLanguage: 'scss',            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],            styles: ['apps/my-app/src/styles.scss'],            scripts: [],            buildOptimizer: false,            optimization: false,            vendorChunk: true,            extractLicenses: false,            sourceMap: true,            namedChunks: true,          },        },      },    },  },}\n```\n",
      "section": "app",
      "anchors": [
        "options-api"
      ],
      "path": "/llm/json/chunked/app/component-testing/angular/overview.json",
      "token_estimate": 121
    }
  ]
}