How to debug Angular Elements

In my recent article I explained in depth the process of creating and using angular web components inside an existing ASP.NET MVC application. Now at work our project is essentially microfrontends built with angular. I have scripts that build and port the components and scripts that generate new ones. I also can run the components in isolation using ng s <MyComponentName>. What I don’t have is meaningful debugging - whenever I place a breakpoint inside my .ts file, it works, but somehow points to a completely different line in the source code. I am still in the process of trying to figure it out, and would love to have a discussion and find out if anyone else has this issue and any ideas on how to solve it

Did you try to disable sourcemaps? I usually debug with sourcemaps disabled

Do you have multiple Angular Elements on the same screen when this happens? I seem to remember having problems with source maps if there are two Angular Elements that both have a app.component.ts (for example).

Renaming helped me.

2 Likes

That’s an interesting observation, @codingnuclei :+1:

Actually, after I removed to comment references to the source maps in the compiled source, I am now at least able to debug the compiled code. Not the best of the solutions, but still works

Thanks, no, I don’t have multiple web components, but the tip is very useful

You can probably just disable source maps in Chrome’s Setttings