Angular library support ?

[neviaumi]

Current behavior

I got Error: Could not find a project with projectType "application" in "angular.json". Visit https://docs.cypress.io/guides/references/configuration#Options-API to see how to pass in a custom project configuration when start cypress

Desired behavior

Run test

Test code to reproduce

Follow guides to create angular library
https://angular.io/guide/creating-libraries

Follow
https://docs.cypress.io/guides/component-testing/quickstart-angular#Configuring-Component-Testing

Got the error.

Cypress Version

10.7.0

Node version

16

Operating System

Mac

Debug Logs

Error: Could not find a project with projectType "application" in "angular.json". Visit https://docs.cypress.io/guides/references/configuration#Options-API to see how to pass in a custom project configuration
    at getProjectConfig (/Users/davidng/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:18:19)
    at async getAngularCliWebpackConfig (/Users/davidng/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:132:117)
    at async angularHandler (/Users/davidng/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:141:27)
    at async getPreset (/Users/davidng/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:76:20)
    at async Function.devServer.create (/Users/davidng/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:93:61)
    at async /Users/davidng/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:25:24

Other

No response

[neviaumi]

Given source code here
https://github.com/cypress-io/cypress/blob/master/npm/webpack-dev-server/src/helpers/angularHandler.ts#L41

I try add defaultProject in my workspace root angular.json then i can get cypress running.

But i got below error when compile

ERROR in ./cypress/support/component.ts 27:8
Module parse failed: Unexpected token (27:8)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
| // Alternatively, can be defined in cypress/support/component.d.ts
| // with a <reference path="./component" /> at the top of your spec.
> declare global {
|   namespace Cypress {
|     interface Chainable {

[neviaumi]

https://github.com/davidNHK/cypress-reproduce-ISSUE-23677

Turn out i can get it working by add dummy application to the workspace.

I not closing the issue coz it not ideal

[lmiller1990]

Hi! Agreed, not ideal... going to tag @jordanpowell88, resident Angular expert. I wonder why not having a defaultProject leads to this 🤔

[jordanpowell88]

Because we are sourcing the information needed to configure webpack from the angular.json file we need to know what the defaultProject is to source the information from. Since it can't find the default project it doesn't know where to source this information from. This is why the error points people to the options config where they can pass in there own project configurations

[lmiller1990]

Any ideas on a recommended fix @jordanpowell88? This seems like it might be a good first issue for an external contributor, if the CT team doesn't have the bandwidth to fix this one before the next release.

[ZachJW34]

We allow the user to pass in custom project configuration options #23161. @davidNHK have you tried this?

[neviaumi]

@ZachJW34 I haven't tried and I think ideally it should support angular library out of box.

[AlexBezzubenko]

Hello @jordanpowell88,
I think that the main question is how to run component tests for angular library. Is it possible with current version of cypress? It will be great to have a simple example with configuration.

[w0wka91]

I think we should also support workspaces where we mix applications and libraries.
I would propose that we add the possibility to add the projectName to the Configuration:

export default defineConfig({
  component: {
    devServer: {
      framework: "angular",
      projectName: "my-lib",
      bundler: "webpack",
    },
    specPattern: "**/*.cy.ts",
  },
});

Or maybe we add it to the options object?

export default defineConfig({
  component: {
    devServer: {
      framework: "angular",
      bundler: "webpack",
      options: {
           projectName: "my-lib",
      }
    },
    specPattern: "**/*.cy.ts",
  },
});

With this information we can resolve the correct webpack config instead of always going for the default project. What do you think?

[jordanpowell88]

At the moment instead of passing a projectName as part of the options API, you can just pass in the specific config https://docs.cypress.io/guides/component-testing/component-framework-configuration#Options-API

With that being said we certainly "could" source the correct config from the angular.json using the projectName, but not sure what advantage this gives you over passing the config directly. I'd love to hear your thoughts?

[w0wka91]

For me it feels unnecessary to duplicate the config which is already available within tha angular.json. If we have workspaces with multiple projects and libs we just end up in a verbose configuration.
I think the user should only have to pass the config directly if it differs from the config which is specified within the angular.json.

[AlexBezzubenko]

In our case we have one project in workspace and this is an angular library. So we don't need to pass project name, we just want to run tests without creating application

[w0wka91]

If think we can just use the config from the angular.json if there is only a single project. So what do you think @jordanpowell88 ?

[jordanpowell88]

Currently it requires your angular project to have a configured application, because we rely on the @angular-devkit/build-angular:dev-server builder. If you have a project with say an application and a library and let Cypress configure your application. as long as your specPattern doesn't point specifically to the app it will pick up component tests in the library and run them fine.

The caveat is that it does it using the app's globals since the lib does not . Internally, we need to determine how we want to handle scenarios like this because libraries target the @angular-devkit/build-angular:ng-packagr builder

[ogdans3]

Does this mean that cypress does not support testing of a library only setup?

Is there a workaround we can use (without creating a dummy application in the same project)?
Is there a patch coming soon fixing this issue?

[ogdans3]

It seems we found a workaround.

After going through the normal setup procedures you have to change cypress.config.ts to the following:

cypress.config.ts

import {defineConfig} from "cypress";

export default defineConfig({
    component: {
        devServer: {
            framework: "angular",
            bundler: "webpack",
            options: {
                projectConfig: {
                    root: "projects/LIBRARY-NAME",
                    sourceRoot: "projects/LIBRARY-NAME/src",
                    buildOptions: {
                        outputPath: "dist/LIBRARY-NAME",
                        main: "projects/LIBRARY-NAME/src/entrypoint-cypress.ts",
                        tsConfig: "projects/LIBRARY-NAME/tsconfig.lib.json",
                    },
                },
            },
        },
        specPattern: "**/*.cy.ts",
    },
});

You then need to create the entrypoint-cypress.ts in projects/LIBRARY-NAME/src/entrypoint-cypress.ts

entrypoint-cypress.ts

import {enableProdMode} from "@angular/core";

enableProdMode();

The entrypoint-cypress.ts file can also be empty and it seems to work just fine.

After this we are able to atleast run a test on a component. Just found this workaround, unsure if it has other side effects.

[Nico-VanHaaster]

Sorry for reviving this thread however we just cant make this work with very strange errors all over the place. Is it possible to get a sample repo of this working (preferably with Angular 13)?

[lmiller1990]

I followed the instructions on the Angular webpage to make an app, I installed Cypress and opened it with npx cypress open. I clicked Component Testing and it configured it for me.

I then added a spec and it worked as expected:

import { AppComponent } from '../src/app/app.component'

describe('App', () => {
  it('playground', () => {
    cy.mount(AppComponent)
  })
})

Here is my repository: https://github.com/lmiller1990/cypress-angular-starter

Angular is supported out of the box - if you find a bug, please log a new issue with a minimal reproduction and we can take a look. If we cannot reproduce the error, it's will be difficult to help.

For debugging, you can do DEBUG=cypress:* npx cypress and copy + paste the terminal logs into your bug report. Thanks!

[ChrTall]

@lmiller1990
I think he asked kindly for an example repo of an angular multi project workspace.
I am also having difficulties trying to add cypress component tests to an angular workspace with multiple library and application projects.
Angular Workspace with multiple projects

[geraintanderson]

@lmiller1990 your example doesn't solve the problem. The question is specifically for a library, and your example uses an application:

In the linked angular.json:
"projectType": "application",

This problem still exists as far as I am aware. Can this be re-opened please?

[lmiller1990]

@lmiller1990 I think he asked kindly for an example repo of an angular multi project workspace. I am also having difficulties trying to add cypress component tests to an angular workspace with multiple library and application projects. Angular Workspace with multiple projects

Thank you!

@geraintanderson okay, sounds like it is still an issue. I am not working on Cypress anymore, I don't think I'll be able to look into this one, maybe @jordanpowell88 has some ideas.

[jordanpowell88]

The Angular project you are using will require an application because we use the Angular builder from that application along with other options from the angular.json to configure Cypress.

With that being said, it should work for your libraries given it has an application. You can also try using the options API to manually configure the options we will source to configure.

[geraintanderson]

@jordanpowell88, thanks for your reply. You're right - I created a new repo to try and isolate the problem when I found this ticket, and that just had a library. When I went back to the original repo with an application & library following your comment I was eventually able to get it working on the library project.

[Colombo97]

@geraintanderson , could you kindly provide an sample repo? I'm struggling to manage it