How to run angular2 cli project in intellij

I am developing an Angular2 project created by angular-cli (latest). I want to run everything in Intellij, but I cannot find a way to do it. I am currently developing only Intellij, but start everything from the console ("npm start"). It is very troublesome because

  • When changing files in Webpack, you don't always see the changes - I think Intellij is caching changes or something

  • I cannot debug Intellij in browser console only

My question is: How do I set up IntelliJ to do everything that NPM start does (auto compile files and generate maps, track changes, work with files) so that everything is handled by Intellij and I can use its full functionality?

Regards

+3
intellij-idea angular


source to share


3 answers


To run an Angular app built with angular-cli in IDEA, you must run npm start

from the NPM Tool Window to run the app, create a JavaScript Debug, run the config for http: // localhost: 4200 / and click Debug .

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



Please note that you may run into problems when debugging on Windows due to recent angular-cli configuration changes: webpack currently generates absolute Windows paths in the sourcemap which breaks debugging ( WEB-27381 ). See https://youtrack.jetbrains.com/issue/WEB-27381#comment=27-2249117 for a possible workaround

+4


source to share


  • For debugging in Intellij you can use the Intellij idea plugin for Chrome: " https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji "

  • to run npm you can use Run | Change configuration | + | NPM

  • Be aware that in https mode IJ JS debugging doesn't work.



+1


source to share


IntelliJ is primarily intended for Java development, while WebStorm is primarily intended for web development, especially Angular, with or without Angular-CLI.

Since you are building an Angular application using the JetBrains.com tool, you should use the JetBrains.com tool, which is specifically designed for Angular development. This is JetBrains WebStorm, not JetBrains IntelliJ.

0


source to share







All Articles
Loading...
X
Show
Funny
Dev
Pics