Allow Angular CT configuration to accept custom project configurations

[ZachJW34]

What would you like?

Angular CT setup should support custom build options to accommodate projects that don't follow the Angular CLI conventions.

Why is this needed?

To support projects that use Angular but don't adhere to Angular CLI conventions (particularly apps created with @nrwl/nx)

Other

We developed Angular CT for projects utilizing @angular/cli. There are conventions with Angular CLI created projects that we rely on, such as sourcing a project's build options via their angular.json. Nx is a popular monorepo tooling solution that supports Angular projects but don't follow the same conventions. The build options are the same, but their source can differ (configurations can be stored in workspace.json or project level project.json configuration files).

We can extend support by allowing these build options to be passed in explicitly (in the cypress.config.ts). Support could look like:

export const defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      // New Options object
      options: {
        projectConfig: { ... }
      },
    },
  },
})

We will probably have to normalize what the projectConfig contains. For Angular CLI projects, the type we expect is:

export type AngularJsonProjectConfig = {
  projectType: string
  root: string
  sourceRoot: string
  architect: {
    build: {
      options: { [key: string]: any } & { polyfills?: string }
      configurations?: {
        [configuration: string]: {
          [key: string]: any
        }
      }
    }
  }
}

We need the root, sourceRoot, options and configuration['<key>'] information, but the json for Nx's workspace.json/project.json might differ so we can condense it to:

type ProjectConfig = {
  root: string
  sourceRoot: string
  buildOptions: Record<key, any>
}

where we assume the buildOptions conform to the Angular builder schema. Rough outline but should fit the bill.

We also assume a tsconfig.json that we extend from, but this might need to be configurable as well.

[ruimonteiro88]

Hi guys, were are using nx and we are having problems configuring component testing (angular).
Is there an ETA on this issue?
Thanks :)

[NicBright]

Hi @ZachJW34

We also assume a tsconfig.json that we extend from, but this might need to be configurable as well.

It seems you're assuming the tsconfig.json is sitting around in the root directory. However, in my project, the path is src/tsconfig.app.json. This can be configured in angular.json, so I suggest you try to get it from there:

{
    ...
    "projects": {
        "project-name": {
            ...
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        ....
                        "tsConfig": "src/tsconfig.app.json",
                        ...

A workaround I'm currently using is having a "forwarding tsconfig.json" in my root folder extending from src/tsconfig.app.json.

Best Regards,
Nic

[ZachJW34]

@ruimonteiro88 we are prioritizing this issue so we should be getting around to it this week or the next

@NicBright we should be able to extend the provided tsconfig (which would eliminate the need to assume where it is). I think we decided on the root due to not wanting to include certain files in the compilation but we could override the tsconfig.files property so that it suites our purposes

[cypress-bot]

The code for this is done in cypress-io/cypress#23494, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 10.7.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.7.0, please open a new issue.