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

Solution 1

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.

Solution 2

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

Solution 3

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. There is a related question here.

Solution 4

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

View more solutions