facebook

How Do I Debug Angular?

  1. CodeMix & Angular IDE
  2.  > 
  3. Getting Help
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #584560 Reply

    myronuecker
    Participant

    This is a basic question about debugging with CodeMix. We are developing a Spring Boot application with an Angular 5 application as the front end. Right now we have our Gradle build set up to build the Angular application and drop the webpack output into the Spring Boot application’s static folder. When I tried setting a breakpoint in the Typescript code, it hit the breakpoint, but lost syntax highlighting and stepping into the code didn’t appear to actually follow our code.

    Is this configuration supported? If so, how do I set up CodeMix to debug the Angular/Typescript code? Is there a different way we should be testing the Angular application?

    #584594 Reply

    Brian Fernandes
    Moderator

    Myron,

    I must admit I don’t have experience with debugging a setup like that, though I have debugged Angular projects that are being served through Node. I’ve been able to step just fine through TypeScript source with full syntax highlighting, etc. Here’s our doc on debugging, if you haven’t seen it yet: https://www.genuitec.com/docs/debugger/debugging-in-codemix/

    Now I believe debugging your set up should be possible, with the right configuration – especially around source maps. Can you share your launch.json file with us? It should be in the .vscode folder in your project.

    #584595 Reply

    myronuecker
    Participant

    I have seen the debugging page, but it doesn’t really talk about how to do something like I’m trying. Certainly if I launched the Angular app separate it would work, but we have dependencies loaded from our Spring application so my index is a JSP file. I know there is a way to debug webpack files, I’m just now sure how I would do it through CodeMix.

    See attached. I just simply told it to launch Chrome and pointed it to the home directory for my Angular client.

    Attachments:
    You must be logged in to view attached files.
    #584791 Reply

    myronuecker
    Participant

    Yesterday I worked with the group that helped set up our Angular project. As it turns out, the source maps were not getting generated completely by Webpack. We changed the webpack config to output eval-source-maps and the code is lining up. The Chrome debugger thinks I am debugging from VSCode, which is to be expected.

    #584794 Reply

    Brian Fernandes
    Moderator

    Myron,

    That’s pretty sweet and thank you for writing back! I’m assuming you didn’t have to change anything in your launch.json?

Viewing 5 posts - 1 through 5 (of 5 total)
Reply To: How Do I Debug Angular?

You must be logged in to post in the forum log in