Debugging Breakpoints not hit in mono repo with libraries

[cluen]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, it was running before. Don't know the exact version (angular 10)

Description

Can't debug into library code with Visual Studio Code or Chrome Debugger. Breakpoints in the app-component.ts are hit but breakpoints in injected service don't. In previous versions of angular it was possible.

Found an stackoverflow article with the same problem, but without a solution / answer:
https://stackoverflow.com/q/67580325/5703479

🔬 Minimal Reproduction

Sample repo: https://github.com/cluen/ng-debug-library

> ng new ng-debug-library
> ng g library @lib-core/components
> ng b @lib-core/components --watch

add test-method to component.service.ts (e.g. console.log(1)) , 
inject and call test-method in app-component.ts

add breakpoint to app-component.ts method call, 
add breakpoint to component.service.ts content

in a different terminal
ng s

launch via visual studio code: F5 (launch.json will be autogenerated, edited content below)

{
  // Verwendet IntelliSense zum Ermitteln möglicher Attribute.
  // Zeigen Sie auf vorhandene Attribute, um die zugehörigen Beschreibungen anzuzeigen.
  // Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
    }
  ]
}

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.2.13
Node: 12.16.1
OS: win32 x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.13
@angular-devkit/build-angular   0.1102.13
@angular-devkit/core            11.2.13
@angular-devkit/schematics      11.2.13
@angular/cli                    11.2.13
@schematics/angular             11.2.13
@schematics/update              0.1102.13
ng-packagr                      11.2.4
rxjs                            6.6.7
typescript                      4.1.5

Anything else relevant?

Chrome: Version 90.0.4430.212
Operating System: Windows
Visual Studio Code Version: 1.56.2
Debugger for chrome: v4.12.12

[alan-agius4]

Hi @cluen,

The problem appears that from your application you are incorrectly referring the library.

- import { ComponentsService } from 'projects/lib-core/components/src';
+ import { ComponentsService } from '@lib-core/components';

[cluen]

@alan-agius4 Yes you are right for this simple reproduction example. It was my fault in generating this simple example.
In our production environment, we have a similiar setup and the import is the correct library path '@lib-core/components'

Any other ideas I can look for?

[alan-agius4]

For breakpoints to work you need to enable sourcemaps, maybe they are disabled?

[cluen]

sourceMaps are active.

for serve

...
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            }
...

if the breakpoint in app-component.ts is hit and I step into it with debugger the correct sourceMaps are displayed. Other breakpoints within the test Method doesn't hit. debugger keyword stops at the right place too, but with no effect to other breakpoints.

[alan-agius4]

if the breakpoint in app-component.ts is hit and I step into it with debugger the correct sourceMaps are displayed. Other breakpoints within the test Method doesn't hit. debugger keyword stops at the right place too, but with no effect to other breakpoints.

This typically indicates the an incorrect file might be referenced in the compilation. What you can try to build your application and verify that in the main.js there are no .ts files referenced from any of your libraries.

To do so, run

ng build --stats-json

And use https://www.npmjs.com/package/webpack-bundle-analyzer to load the stats.json file.

[cluen]

@alan-agius4 Thank you very very much. You made my day.
There were wrong / direct file imports in our libraries.

Found them with the following regex:
^import([a-zA-Z\{\} ]*)'projects

[alan-agius4]

Glad you found the problem 😀

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}