Debug Angular components that are located in node_modules

I've created an Angular 4.3.6 project using Angular CLI version 1.3.1 (and thus am using WebPack).

The web application is running on top of a NodeJs express based layer. To be able run and/or debug both of them at the same time, I created a Node.Js configuration that starts my server.js (Express server) after 'ng build' is run. I also set it to start it to open my browser and attach the Javascript debugger to it.

The first time I ran this, IntelliJ IDEA automatically created a matching Javascript debug configuration and both are launched when I start the NodeJs run/debug configuration.

Some of the Angular modules I use are grouped and installed in a node module. They are thus listed underneath the node_modules directory instead of the Angular app directory.

The structure is more or less like this:

- node_modules

-- @myscope

--- ui

---- componentx

----- componentx.component.ts

----- componentx.component.html

----- componentx.component.css

- portal (is actually the default Angular CLI created app directory)

-- index.html

-- main.ts

--- moduleA

---- componentB

----- componentB.component.ts

----- componentB.component.html

----- componentB.component.css

... (locally stored Angular modules and components)

 

Debugging works for the locally stored Angular modules and components, but it does not work for the components that are stored within node_modules. So breakpoints I set in componentx.component.ts would not be hit, while breakpoints in componentb.component.ts are hit successfully.

I tried what is described in https://youtrack.jetbrains.com/issue/WEB-24509#comment=27-1776923 and set Remote URL mapping for <project dir>/node_modules  folder to webpack:///<project dir>/~ but that didn't help.

Is there anything I am missing?

I am using IntelliJ IDEA 2017.2.3.

12 comments
Comment actions Permalink

Everything works fine for me when using your use_in_node_modules project (didn't try the other one): breakpoint in node_modules/@scoped/ui/footer/footer.component.ts is hit:

 

To make this work, I've mapped node_modules folder to webpack://C:/downloads/tstapp/tstapp/use_in_node_modules/node_modules


1
Comment actions Permalink

>I tried what is described in https://youtrack.jetbrains.com/issue/WEB-24509#comment=27-1776923 and set Remote URL mapping for <project dir>/node_modules  folder to webpack:///<project dir>/~ but that didn't help

 

the required mappings might be different in your case. You can inspect the generated sourcemaps to see what paths look like there, and set mappings accordingly

0
Comment actions Permalink

How can I inspect the generated sourcemaps and what should I be looking for to know how and what to map in IntelliJ?

0
Comment actions Permalink

By the way, I found out that breakpoints are working if I moved those Angular components from 'node_modules' to 'external_modules' (on the same level - as a sibling of node_modules). Do you know what might be causing that behavior if you create an application with Angular CLI version 1.3.1?

And is this caused by something in IntelliJ IDEA, WebPack, ...?

0
Comment actions Permalink

>How can I inspect the generated sourcemaps and what should I be looking for to know how and what to map in IntelliJ?

This is described in https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/:

To get this mapping, we investigated the content of http://localhost:4200/main.bundle.map file. This is a source map file for the bundle that contains the compiled application source code. Search for main.ts, the main app’s file; its path is webpack:///./src/main.ts.

If this file is located in <project_dir>/src folder, then the webpack:///./ prefix corresponds to project root dir, and mappings have to be set accordingly

Didn't try with cli 1.3 - the sourcemap URL may be different there...

 

0
Comment actions Permalink

Try setting `webpack://full/path/to/node_modules` (like webpack://C:/WebstormProjects/untitled3/node_modules) as URL mappings for node_modules folder

0
Comment actions Permalink

In the meantime I tried with 'ng eject' and edit the Webpack config so that the scoped node modules would be included in the main bundle but that didn't work either (I saw that the components were correctly in that bundle, but I still wasn't able to hit any breakpoints in the components that are living inside node_modules).

Mapping it to the URL as you mentioned didn't help either. 

I have created a very basic but comparable project to be able to test it, one version where I reference the components in an 'external_modules' directory and one where they are in 'node_modules'. Debugging the components in 'external_modules' works fine but breakpoints are not hit when they are located in 'node_modules'.

You can download the project (both versions) at: https://www.dropbox.com/s/k53xlno4xn9twvn/tstapp.zip?dl=0. Please note that the default 'src' directory is renamed to 'portal' (which should not make a difference?) and it also contains a basic NodeJs Express server to host everything.

There are two components in that application with just enough in them to try to hit a breakpoint in IntelliJ IDEA:

- @scoped/ui/footer/footer.component.ts -> line 9 (= the external component)

- portal/modules/local/overview/overview.component.ts -> line 9 (= the component that resides inside the app itself)

Any help is highly appreciated!

0
Comment actions Permalink

There does seem to be a small difference between the generated map files if you do an 'ng eject' or not.

Before 'ng eject' the map files have full path names (fe: 'C:/[projectdirectory]/portal/main.ts'). After 'ng eject' this immediately seems to change to relative path names (fe: './portal/main.ts'). Although both of them fail to debug any component within the node_modules directory.

0
Comment actions Permalink

I didn't eject the configuration, and debugging works perfectly fine for me when using URL mappings I described above

0
Comment actions Permalink

Ow, I missed your previous comment. You are absolutely right! It does working when I use the Remote URL you mentioned above.

I tried different ones before and also read about using three slashes (webpack:///) instead of two (webpack://) but none of them worked. Probably I was also mapping the root directory at the same time.

Thanks a lot for looking into this!

0
Comment actions Permalink

It does not seem to work for the main project I am trying to get this to work but it might be because of something else (?). When I start debugging, it opens Google Chrome but that seems to be stuck at chrome-extension://hmhgeddbohgjknpmjagkdomcpobmllji/loading.html?url=http%3A%2F%2Flocalhost%3A3000%2F and IntelliJ IDEA reports: "Waiting for connection from JetBrains IDE Support extension for Chrome. Please ensure you have installed the extension and IDE port configured (current port 63342), or see Help.".

While this does actually seem to work for the slimmed down version of the main project. Not sure what the difference might be.

 

Edit: Ah, it works after restarting IntelliJ IDEA...

0
Comment actions Permalink

Usually it just means that the connection is not yet established (application is not up and running). You have to wait a bit to get debugger connected

0

Please sign in to leave a comment.