{
  "doc": {
    "id": "app/write-tests/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/write-tests/component-testing/angular/overview.md",
    "version": "066c46e056f0f322a0670d2d3aa4e6adaebfe717",
    "updated_at": "2026-09-10T13:30:12.426Z",
    "headings": [
      {
        "id": "app/write-tests/component-testing/angular/overview#angular-component-testing",
        "text": "Angular Component Testing",
        "level": 1
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#tutorial",
        "text": "Tutorial",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#installation",
        "text": "Installation",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#framework-configuration",
        "text": "Framework Configuration",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#angular-cli-configuration",
        "text": "Angular CLI Configuration",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#options-api",
        "text": "Options API",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#sample-angular-apps",
        "text": "Sample Angular Apps",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#styling",
        "text": "Styling",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#sass-use-import-cant-find-a-stylesheet",
        "text": "Sass @use / @import can't find a stylesheet",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#tailwind-css-v4-utility-classes-arent-applied",
        "text": "Tailwind CSS v4 utility classes aren't applied",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/angular/overview#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "app/write-tests/component-testing/angular/overview#installation",
      "doc_id": "app/write-tests/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*   Bun\n\n```\nnpm install cypress --save-dev\n```\n\n```\nyarn add cypress --dev\n```\n\n```\npnpm add --save-dev cypress\n```\n\n```\nbun add --dev cypress\n```\n\nOpen Cypress:\n\n*   npm\n*   Yarn\n*   pnpm\n*   Bun\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\n```\nbunx 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/write-tests/component-testing/angular/overview.json",
      "token_estimate": 159
    },
    {
      "id": "app/write-tests/component-testing/angular/overview#framework-configuration",
      "doc_id": "app/write-tests/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.\n\nFor a full explanation of how the dev server and bundler work — including automatic config detection and override options — see [Component Testing Configuration — Dev Server and Bundler](/llm/markdown/app/component-testing/component-framework-configuration.md#Dev-Server-and-Bundler).\n\nThe examples below are for quick reference.\n\n### Angular CLI Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\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'\n\nexport default {\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          root: '',\n          sourceRoot: 'apps/my-app',\n          buildOptions: {\n            outputPath: 'dist/my-app',\n            index: 'apps/my-app/src/index.html',\n            main: 'apps/my-app/src/main.ts',\n            polyfills: 'apps/my-app/src/polyfills.ts',\n            tsConfig: 'apps/my-app/tsconfig.app.json',\n            inlineStyleLanguage: 'scss',\n            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],\n            styles: ['apps/my-app/src/styles.scss'],\n            scripts: [],\n            buildOptimizer: false,\n            optimization: false,\n            vendorChunk: true,\n            extractLicenses: false,\n            sourceMap: true,\n            namedChunks: true,\n          },\n        },\n      },\n    },\n  },\n}\n```\n\n#### Sample Angular Apps\n\n*   [Angular 22](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular)\n",
      "section": "app",
      "anchors": [
        "framework-configuration"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/angular/overview.json",
      "token_estimate": 295
    },
    {
      "id": "app/write-tests/component-testing/angular/overview#angular-cli-configuration",
      "doc_id": "app/write-tests/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')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\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'\n\nexport default {\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          root: '',\n          sourceRoot: 'apps/my-app',\n          buildOptions: {\n            outputPath: 'dist/my-app',\n            index: 'apps/my-app/src/index.html',\n            main: 'apps/my-app/src/main.ts',\n            polyfills: 'apps/my-app/src/polyfills.ts',\n            tsConfig: 'apps/my-app/tsconfig.app.json',\n            inlineStyleLanguage: 'scss',\n            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],\n            styles: ['apps/my-app/src/styles.scss'],\n            scripts: [],\n            buildOptimizer: false,\n            optimization: false,\n            vendorChunk: true,\n            extractLicenses: false,\n            sourceMap: true,\n            namedChunks: true,\n          },\n        },\n      },\n    },\n  },\n}\n```\n\n#### Sample Angular Apps\n\n*   [Angular 22](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular)\n",
      "section": "app",
      "anchors": [
        "angular-cli-configuration"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/angular/overview.json",
      "token_estimate": 208
    },
    {
      "id": "app/write-tests/component-testing/angular/overview#options-api",
      "doc_id": "app/write-tests/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'\n\nexport default {\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          root: '',\n          sourceRoot: 'apps/my-app',\n          buildOptions: {\n            outputPath: 'dist/my-app',\n            index: 'apps/my-app/src/index.html',\n            main: 'apps/my-app/src/main.ts',\n            polyfills: 'apps/my-app/src/polyfills.ts',\n            tsConfig: 'apps/my-app/tsconfig.app.json',\n            inlineStyleLanguage: 'scss',\n            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],\n            styles: ['apps/my-app/src/styles.scss'],\n            scripts: [],\n            buildOptimizer: false,\n            optimization: false,\n            vendorChunk: true,\n            extractLicenses: false,\n            sourceMap: true,\n            namedChunks: true,\n          },\n        },\n      },\n    },\n  },\n}\n```\n",
      "section": "app",
      "anchors": [
        "options-api"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/angular/overview.json",
      "token_estimate": 124
    },
    {
      "id": "app/write-tests/component-testing/angular/overview#styling",
      "doc_id": "app/write-tests/component-testing/angular/overview",
      "heading": "Styling",
      "heading_level": 2,
      "content_markdown": "## Styling\n\nCypress builds your component specs with the Angular build pipeline. When you do **not** provide an `options.projectConfig`, Cypress reads the build options (including `assets`, `styles`, and `stylePreprocessorOptions`) from the default application project in your `angular.json`. When you **do** provide your own [`projectConfig`](#Options-API), it _replaces_ the configuration Cypress detects from `angular.json`, so any build options your styles rely on must be repeated in your `buildOptions`. The two issues below are usually a result of this.\n\n### Sass `@use` / `@import` can't find a stylesheet\n\nIf your Sass resolves imports through paths configured in `angular.json` under `stylePreprocessorOptions.includePaths`, you may see an error during component testing like:\n\n```\n❌ Can't find stylesheet to import.\n@use 'mixins'\n```\n\nThis happens when a custom `projectConfig` omits those include paths. Add the same `stylePreprocessorOptions` to your `buildOptions` so the Sass compiler can resolve the imports:\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          root: '',\n          sourceRoot: 'src',\n          buildOptions: {\n            styles: ['src/styles.scss'],\n            stylePreprocessorOptions: {\n              includePaths: ['src/styles'],\n            },\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          root: '',\n          sourceRoot: 'src',\n          buildOptions: {\n            styles: ['src/styles.scss'],\n            stylePreprocessorOptions: {\n              includePaths: ['src/styles'],\n            },\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n\n### Tailwind CSS v4 utility classes aren't applied\n\nWith Tailwind CSS v4, you may find that your own styles load correctly but Tailwind utility classes such as `bg-red-500` have no effect. The class is present on the element in the DevTools inspector, but no rule is generated for it. This is because Tailwind v4 generates utilities through its own build plugin, which is not part of the Angular build pipeline Cypress uses to compile your `styles`.\n\nA reliable workaround is to precompile your Tailwind stylesheet into a plain CSS file with the [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) and load that compiled file through `buildOptions.styles`.\n\nInstall the CLI:\n\n*   npm\n*   yarn\n*   pnpm\n*   bun\n\n```\nnpm install -D @tailwindcss/cli\n```\n\n```\nyarn add -D @tailwindcss/cli\n```\n\n```\npnpm add -D @tailwindcss/cli\n```\n\n```\nbun add -d @tailwindcss/cli\n```\n\nCompile your stylesheet before opening or running Cypress, then point `buildOptions.styles` at the compiled output:\n\n```\n{\n  \"scripts\": {\n    \"build:ct-styles\": \"npx @tailwindcss/cli -i ./src/styles.scss -o ./cypress/support/compiled-styles.css\",\n    \"cypress:open\": \"npm run build:ct-styles && cypress open --component\",\n    \"cypress:run\": \"npm run build:ct-styles && cypress run --component\"\n  }\n}\n```\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          buildOptions: {\n            styles: ['cypress/support/compiled-styles.css'],\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          buildOptions: {\n            styles: ['cypress/support/compiled-styles.css'],\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n",
      "section": "app",
      "anchors": [
        "styling"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/angular/overview.json",
      "token_estimate": 651
    },
    {
      "id": "app/write-tests/component-testing/angular/overview#sass-use-import-cant-find-a-stylesheet",
      "doc_id": "app/write-tests/component-testing/angular/overview",
      "heading": "Sass @use / @import can't find a stylesheet",
      "heading_level": 3,
      "content_markdown": "### Sass `@use` / `@import` can't find a stylesheet\n\nIf your Sass resolves imports through paths configured in `angular.json` under `stylePreprocessorOptions.includePaths`, you may see an error during component testing like:\n\n```\n❌ Can't find stylesheet to import.\n@use 'mixins'\n```\n\nThis happens when a custom `projectConfig` omits those include paths. Add the same `stylePreprocessorOptions` to your `buildOptions` so the Sass compiler can resolve the imports:\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          root: '',\n          sourceRoot: 'src',\n          buildOptions: {\n            styles: ['src/styles.scss'],\n            stylePreprocessorOptions: {\n              includePaths: ['src/styles'],\n            },\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          root: '',\n          sourceRoot: 'src',\n          buildOptions: {\n            styles: ['src/styles.scss'],\n            stylePreprocessorOptions: {\n              includePaths: ['src/styles'],\n            },\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n",
      "section": "app",
      "anchors": [
        "sass-use-import-cant-find-a-stylesheet"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/angular/overview.json",
      "token_estimate": 209
    },
    {
      "id": "app/write-tests/component-testing/angular/overview#tailwind-css-v4-utility-classes-arent-applied",
      "doc_id": "app/write-tests/component-testing/angular/overview",
      "heading": "Tailwind CSS v4 utility classes aren't applied",
      "heading_level": 3,
      "content_markdown": "### Tailwind CSS v4 utility classes aren't applied\n\nWith Tailwind CSS v4, you may find that your own styles load correctly but Tailwind utility classes such as `bg-red-500` have no effect. The class is present on the element in the DevTools inspector, but no rule is generated for it. This is because Tailwind v4 generates utilities through its own build plugin, which is not part of the Angular build pipeline Cypress uses to compile your `styles`.\n\nA reliable workaround is to precompile your Tailwind stylesheet into a plain CSS file with the [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) and load that compiled file through `buildOptions.styles`.\n\nInstall the CLI:\n\n*   npm\n*   yarn\n*   pnpm\n*   bun\n\n```\nnpm install -D @tailwindcss/cli\n```\n\n```\nyarn add -D @tailwindcss/cli\n```\n\n```\npnpm add -D @tailwindcss/cli\n```\n\n```\nbun add -d @tailwindcss/cli\n```\n\nCompile your stylesheet before opening or running Cypress, then point `buildOptions.styles` at the compiled output:\n\n```\n{\n  \"scripts\": {\n    \"build:ct-styles\": \"npx @tailwindcss/cli -i ./src/styles.scss -o ./cypress/support/compiled-styles.css\",\n    \"cypress:open\": \"npm run build:ct-styles && cypress open --component\",\n    \"cypress:run\": \"npm run build:ct-styles && cypress run --component\"\n  }\n}\n```\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          buildOptions: {\n            styles: ['cypress/support/compiled-styles.css'],\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'angular',\n      bundler: 'webpack',\n      options: {\n        projectConfig: {\n          buildOptions: {\n            styles: ['cypress/support/compiled-styles.css'],\n          },\n        },\n      },\n    },\n    specPattern: '**/*.cy.ts',\n  },\n})\n```\n",
      "section": "app",
      "anchors": [
        "tailwind-css-v4-utility-classes-arent-applied"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/angular/overview.json",
      "token_estimate": 340
    }
  ]
}