How do you debug an Angular 6 library

Question

I'm writing an Angular 6 Library and cannot figure out how to step into the typescript.

I generated the app using: ng new mylibapp

I then added the library using: ng g library @abc/cool-lib -p abc

when I perform: ng build @abc/cool-lib

it generates the code in the mylibapp/dist/abc/cool-lib folder

How can I now debug this code and set breakpoints in the ts file located at mylibapp/projects/abc/cool-lib/src/lib

score 17 · Answer 1 · answered Jul 24 '19 at 16:46

17

As of @angular/cli v7, you can add the following configuration to your angular.json file to enable sourcemaps for a library when serving using ng serve:

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true

answered Jul 24 '19 at 16:46

Ravi Mashru

497
3
10

1

This is the correct answer. It would be to use the --vendor-source-map switch, but that is deprecated. This angular.json switch is what you use instead. – Gary Jul 26 '19 at 22:26
Yay! I thought this was going to much harder to figure out. This worked immediately. Thanks! – HankScorpio Oct 17 '19 at 20:44
Perfect answer i was looking for. – Arul Rozario Nov 28 '19 at 06:40
4

"options": {"sourceMap": {"scripts": true,"styles": true,"vendor": true}} – John Duffy Jan 29 '21 at 12:22
1

*Data path "" must NOT have additional properties(vendorSourceMap).* Same for all other variants ... – testing Mar 16 '23 at 14:04

score 15 · Answer 2 · answered Jun 30 '18 at 14:21

15

Looking at the Angular CLI docs on libraries, it mentions the following:

Some similar setups instead add the path to the source code directly inside tsconfig. This makes seeing changes in your app faster.

So, from that, you can actually update your tsconfig.json to reference your local source code instead of the built library.

Using the built project:

 "paths": {
  "abc": [
    "dist/abc"
  ]

Change it to use the actual source:

"paths": {
  "abc": [
    "projects/abc/src/public_api"
  ]

There are downsides as mentioned in the docs:

But doing that is risky. When you do that, the build system for your app is building the library as well. But your library is built using a different build system than your app.

But in my case, it was worth it to allow me to debug in Chrome interactively as well as to see changes immediately without rebuilding. I do fully test with the built project outside of this workflow though.

answered Jun 30 '18 at 14:21

Andy Kachelmeier

187
1
5

This is working well for me. And as mentioned, solves both the problems of debugging typescript and seeing changes without rebuilding the lib. – reads0520 Jul 05 '18 at 16:23
1

It works for me also very well in project with more libs. Thanks very much. – Jie Jul 25 '18 at 16:26
1

I found that it is no longer possible to build libraries that require other libraries in your projects due to typescript rootDir errors. However it is possible to just add the source code directory (_projects/libraryName/src/public-api_) you mentioned in your answer to the already existing _dist/libraryName_ entry as a second line. This way I can debug and build all libraries. Tested with Angular 8.1.3 – Tobias Reithmeier Aug 01 '19 at 09:13
Adding to @comic-sans comment, place the dist/... location before the projects/... location, it will use the first one it finds. This will allow the libs to build, but debugging won't work after the library has been built. Just remember to delete the dist folder if it exists before debugging. Wish there was a smoother solution. I have not been able to get the vendor source map solution to work for debugging in an IDE. – reads0520 Nov 20 '19 at 20:28
I can say that this does not work in Angular 8. It is not enough to have hot reloading of your libraries. I found this helpful: https://stackoverflow.com/questions/59356732/angular-library-and-live-reload – Vallerious Mar 20 '20 at 08:10

deepakchethan · Answer 3 · 2022-06-08T05:34:57.553

If you are using angular version 12 or greater then you would have to add sourceMap with scripts, styles, vendor as true (if you need them to debug) in your angular.json of your host application.

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            },

Markus Pscheidt · Answer 4 · 2022-08-05T09:25:25.853

The setup is now (using Angular 7, probably 6.2 already) quite straight forward:

Compile library in watch mode: ng build [mylib] --watch
Start app with vendor source maps: ng serve --vendor-source-map

Now library sources are available (in Chrome/Firefox/... dev tools).

Update for Angular 7.2:

--vendor-source-map has been replaced with --sourceMap=true|false for ng serve:

ng serve --source-map=true

Further update: --source-map=true unfortunately hasn't got the desired effect. Put this configuration in angular.json (see related question here):

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    },

score 2 · Answer 5 · answered Oct 28 '18 at 18:54

2

Since Angular CLI v. 6.1, you can use the switch --vendor-source-map which will allow you to step into your library's typescript source when debugging. Try ng build @abc/cool-lib --vendor-source-map and see if that helps. You can also use the switch with ng serve. In my case, I run ng serve on my application which is hosting the library, and the library's source map is included. This way also saves you having to edit tsconfig.json

answered Oct 28 '18 at 18:54

Scott Grodberg

168
1
5

I will give this a try, if it works this sounds perfect. – JoAMoS Oct 28 '18 at 18:59
1

this option is deprecated – tbo47 Apr 09 '19 at 14:21

score -4 · Answer 6 · answered Jun 27 '18 at 13:43

-4

Check out the "Debugger for Chrome" extension in VSCode, maybe that helps you out.

answered Jun 27 '18 at 13:43

Michael Bruyninckx

738
1
8
16

How do you debug an Angular 6 library

6 Answers6

Linked