How do you debug an Angular 6 library

angular typescript angular-cli angular-cli-v6 ng-packagr
JoAMoS picture JoAMoS · Jun 9, 2018 · Viewed 9.6k times · Source

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

Ravi Mashru picture Ravi Mashru · Jul 24, 2019

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

Related questions

@types/googlemaps/index.d.ts' is not a module

I want to use the Google Maps API with my Angular project, so I used these two commands to install npm packages: npm install @agm/core --save-dev npm install @types/googlemaps --save-dev I added this line to my component: import {} …

Read More
ng build --prod does NOT minify / uglify / remove comments since Angular CLI 6

Since I've upgraded my Angular app to use Angular CLI version 6.x, compiling it for production (using ng build --prod, as usual) does not produce minified js. This result in very big vendor.js size (in my case is almost 10 …

Read More
Specified module does not exist Angular 6

Can you tell me why I cannot use below CLI? It says Specified module does not exist. Same error for both CLI commands. Note: I have upgraded this app from ng 5 to ng 6. Is that this error due to some …

Read More