How to run angular2 cli project in intellij

Question

I am developing an Angular2 project generated by angular-cli ( latest ). I want to run everything within Intellij however I can not find a way to do it. Currently I only develop in Intellij but run everything from the console ( 'npm start' ). This is very troublesome however because

1. When I change files the webpack does not always see the changes - I think Intellij is caching the changes or something

2. I can not debug in Intellij only in console of the browser

My question is : How to set up Intellij to do everything that 'npm start' does ( auto compile files and generate maps, watch for changes, serve the files ) so that everything is handled by Intellij and I can use it's full functionality ?

Best regards

Answer 1

To run Angular application created with angular-cli in IDEA, you have to run npm start from NPM Tool Window to start the application, create JavaScript Debug run configuration for http://localhost:4200/ URL and hit Debug.

See https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/, https://www.youtube.com/watch?v=upgjCMHGpwo for more info. See also https://blog.jetbrains.com/webstorm/2016/04/angular-2-workflow-in-webstorm/

Note that you might face issues when debugging on Windows because of recent changes in angular-cli configuration: currently webpack generates absolute Windows paths in sourcemap that break the debugging (WEB-27381). See https://youtrack.jetbrains.com/issue/WEB-27381#comment=27-2249117 for possible workaround

Answer 2

• To debug with Intellij you can use intellij idea plugin for Chrome : "https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji"

• to run npm you can use Run | Edit Configuration | + | npm

• Be aware that on https mode IJ JS debug does not work well.