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

Answer 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.

Answer 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

Answer 3

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
            },

Answer 4

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
    },