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
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.
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.
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
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
Check out the "Debugger for Chrome" extension in VSCode, maybe that helps you out.
来源:https://stackoverflow.com/questions/50775520/how-do-you-debug-an-angular-6-library