Angular CLI 6 – Build Angular Libraries With Source Maps

angularangular-cliangular-cli-v6angular6

I've got an Angular 6 project that I've generated using Angular CLI 6 (6.08).

I created separate libraries using the ng generate library [lib name] --prefix [lib prefix] (approach outlined in this article: https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11).

I build each library using ng build [lib name] and then serve my application using ng serve.

However, when I view the source in Chrome Dev Tools, my libraries don't have source maps.

I've tried building each library using ng build [lib name] --source-map (as specified here: https://github.com/angular/angular-cli/wiki/build), but I think that's only for building that application, not libraries.

Does anyone know what I'm doing wrong have an alternative solution?

Best Answer

I had the same problem. I ended up with pointing the library path directly to the public_api.ts file of the library instead of to the dist folder. This way I'm able to debug the application in the Dev Tools without any problems (furthermore I'm able to debug it directly from within Visual Studio Code this way).

So in your tsconfig.json instead of this:

"paths": {
  "my-lib": [
    "dist/my-lib"
  ]
}

I replaced it with this:

"paths": {
  "my-lib": [
    "projects/my-lib/src/public_api.ts"
  ]
}

This also has the nice side effect that auto reload works when doing changes in the library code.

However I'm not sure if it is recommended to do it that way, so I would like to see other approaches.

Related Topic