Cypress tests fail after upgrading v12 => v13 (Module not found: Error: Can't resolve '@angular/core')

[oco2000]

Current Behavior

Cypress tests fail

Expected Behavior

Cypress tests pass

Steps to Reproduce

Upgrade the existing project using standard migration procedure

Failure Logs

Error: Webpack Compilation Error
C:/FLS/frontend/node_modules/@angular/common/fesm2015/common.mjs
Module not found: Error: Can't resolve '@angular/core' in 'C:\FLS\frontend\node_modules\@angular\common\fesm2015'
resolve '@angular/core' in 'C:\FLS\frontend\node_modules\@angular\common\fesm2015'
  Parsed request is a module
  using description file: C:\FLS\frontend\node_modules\@angular\common\package.json (relative path: ./fesm2015)
    Field 'browser' doesn't contain a valid alias configuration

Environment

  Node : 14.17.0
  OS   : win32 x64
  yarn : 1.22.17

  nx : 13.2.2
  @nrwl/angular : 13.2.2
  @nrwl/cli : 13.2.2
  @nrwl/cypress : 13.2.2
  @nrwl/devkit : 13.2.2
  @nrwl/eslint-plugin-nx : 13.2.2
  @nrwl/express : 13.2.2
  @nrwl/jest : 13.2.2
  @nrwl/linter : 13.2.2
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : 13.2.2
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.2.2
  @nrwl/web : undefined
  @nrwl/workspace : 13.2.2
  @nrwl/storybook : 13.2.2
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 6.6.6
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.0.0
         @angular/cdk: 13.0.0
         @angular/cli: 13.0.3
         @angular/common: 13.0.0
         @angular/compiler: 13.0.0
         @angular/core: 13.0.0
         @angular/elements: 13.0.0
         @angular/forms: 13.0.0
         @angular/material: 13.0.0
         @angular/platform-browser: 13.0.0
         @angular/platform-browser-dynamic: 13.0.0
         @angular/router: 13.0.0
         @angular/service-worker: 13.0.0
         @ionic/angular: 5.9.1
         @ngneat/reactive-forms: 1.7.5
         @ngneat/transloco: 2.23.5
         @ngrx/component-store: 13.0.1
         @ngrx/effects: 13.0.1
         @ngrx/entity: 13.0.1
         @ngrx/router-store: 13.0.1
         @ngrx/store: 13.0.1
         @angular-builders/custom-webpack: 12.1.3
         @angular-devkit/build-angular: 13.0.3
         @angular/compiler-cli: 13.0.0
         @angular/language-service: 13.0.0
         @ngneat/spectator: 8.3.2
         @ngrx/schematics: 13.0.1
         @ngrx/store-devtools: 13.0.1
         @nxext/stencil: 12.1.2
         @nxtend/capacitor: 11.1.1
         @nxtend/ionic-angular: 11.1.1
         @storybook/angular: 6.4.0-rc.3
         ng-mocks: 12.5.0
         nx-stylelint: 12.3.1

[leosvelperez]

Thanks for reporting this!

Could you provide a minimal repo where the issue can be reproduced?

Cypress tests shouldn't have any direct dependency on Angular packages. Cypress tests run against an application that has already been built and served. That sounds like building the application is what's failing and not running the tests.

I can see you are using several community plugins including @angular-builders/custom-webpack: 12.1.3 which might not yet support Angular 13 changes and it could cause the build to fail.

[Avcajaraville]

@leosvelperez I am having just the same issue and I don't use @angular-builders/custom-webpack: 12.1.3.

This happens when importing something with an angular dependency.

In my case, I have an input component that also exports a validation message (for testing purposes). When importing this validation message (it is an exported const), It is then that this error pops.

@oco2000 any workaround on your side?

Thans!

[Saafine]

I am having the same issue (Migrating Angular from 12 to 13). Steps to reproduce were provided in: https://github.com/nrwl/nx/issues/7967

Let me know if there are any workarounds 🙏

[leosvelperez]

We are looking into this. This is broken due to the Angular packages now only being distributed with ESM. There's an issue open in the Cypress repo tracking this and there's this comment with a workaround for those of you that are importing from @angular/cdk directly in your Cypress tests.

If you are importing code from your application/library that workaround alone might not solve the issue you're having and it might be solved by additionally adding an import '@angular/cli' at the top of your Cypress tests that have the issue.

[Coly010]

It looks like a workaround has been found on the Cypress Issue thread: https://github.com/cypress-io/cypress/issues/19066#issuecomment-1012055705

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.