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

Ruelle

Answer 1

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

Quag

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. – Remittent

Yay! I thought this was going to much harder to figure out. This worked immediately. Thanks! – Disloyal

Perfect answer i was looking for. – Roofer

"options": {"sourceMap": {"scripts": true,"styles": true,"vendor": true}} – Haematocele

Data path "" must NOT have additional properties(vendorSourceMap). Same for all other variants ... – Unpen

Answer 2

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.

Substandard

This is working well for me. And as mentioned, solves both the problems of debugging typescript and seeing changes without rebuilding the lib. – Misunderstood

It works for me also very well in project with more libs. Thanks very much. – Oversew

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 – Speed

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. – Misunderstood

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: #59357232 – Theodosia

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

Unequivocal

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

Limpet

Answer 5

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

Pomace

I will give this a try, if it works this sounds perfect. – Ruelle

this option is deprecated – Gentilis

Answer 6

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

Caleb