Skip to content

Add Angular handler to @cypress/webpack-dev-server #22812

@ZachJW34

Description

@ZachJW34

In order to support Angular for Component Testing, we need to add an Angular handler to our npm/webpack-dev-server package. We are targeting v13/v14 support.

The responsibilities of this handler are:

  • Source the Webpack related dependencies needed to compile (webpack, webpack-dev-server, html-webpack-plugin)
  • Source a Webpack config that will compile Angular components

This handler will be targeted at users that created Angular projects using the @angular/cli package. If a user is not using this package, they will most likely have configured their own webpack.config.js that they can pass in. This handler will be similar to the other handlers we have for higher-order frameworks {create-react-app, next, nuxt, vue-cli}.

Angular offers a Webpack plugin for compiling Angular projects: https://www.npmjs.com/package/@ngtools/webpack
The @angular/devkit has internal APIs for sourcing an @angular/cli specific project config, though it is contextual to their builder API so it isn't as straightforward to use these APIs: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/browser/index.ts#L109

Ideally, it would be great to use the @angular/devkit APIs as doing so would allow us to respect the options specified by the user (normally stored in a project's angular.json). Otherwise, a custom solution that fits most of the needs of the user is acceptable.

Requirements:

  • Source webpack deps and webpack config that enables the compilation of Angular components
  • System tests in npm/webpack-dev-server proving that the compilation is successful (There is an external Angular mounting package we can utilize while we work on official mounting support)

There is an in-progress PR for this work: #22314

Metadata

Metadata

Assignees

Labels

CTIssue related to component testingtype: featureNew feature that does not currently exist

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions