Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Angular 14 source code can not debugged properly in WebStorm / IDEA #1936

Open
CSchulz opened this issue Jan 26, 2023 · 2 comments
Open
Labels
🐛 Bug Confirmed Bug is confirmed 🤷‍♂️ Needs More Info waiting for more information from author of the issue

Comments

@CSchulz
Copy link

CSchulz commented Jan 26, 2023

Version

12.2.6 & 13.0.0-next.0

Steps to reproduce

  1. Clone this repo
  2. Install the dependencies for examples/example-app-v14
  3. Set break points in node_modules/@angular/forms/festm2020/forms.mjs, f.e. BaseControlValueAccessor.setProperty
  4. Debug the demo.testbed.spec.ts and try to run through the forms code.

Expected behavior

It should be possible to debug also the angular source code.

Actual behavior

The source code mapping points to different lines:

image

image

image

Additional context

It could be possible this bug belongs to ts-jest or other library. I think it is related to the transition of commonjs to esm of angular library. I haven't tested it with other esm libraries.

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
  Binaries:
    Node: 16.15.0 - C:\nodejs\node.EXE
    npm: 8.5.5 - C:\nodejs\npm.CMD
  npmPackages:
    jest: ^29.4.1 => 29.4.1
@ahnpnl
Copy link
Collaborator

ahnpnl commented Jan 27, 2023

Does it happen to other packages other than packages with Angular package format? If so, I think we should ask for help from Angular team to recheck Angular package format.

@ahnpnl ahnpnl added 🐛 Bug 🤷‍♂️ Needs More Info waiting for more information from author of the issue Confirmed Bug is confirmed and removed Bug Report Needs Triage labels Jan 27, 2023
@CSchulz
Copy link
Author

CSchulz commented Jan 27, 2023

I have tried it with lodash-es and there is the same issue.

My adjusted jest.config.js:

const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;

// eslint-disable-next-line no-undef
globalThis.ngJest = {
  skipNgcc: false,
  tsconfig: 'tsconfig.spec.json',
};

const transformEsModules = [
  'lodash-es',
  '@angular',
];

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'jest-preset-angular',
  globalSetup: 'jest-preset-angular/global-setup',
  moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '<rootDir>' }),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  transformIgnorePatterns: [
    '/node_modules/(?!(' + transformEsModules.join('|') + ')/)',
  ],
};

During debugging you can not step into merge of lodash-es to check what is happening inside.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug Confirmed Bug is confirmed 🤷‍♂️ Needs More Info waiting for more information from author of the issue
Projects
None yet
Development

No branches or pull requests

2 participants