I used angular-cli#1.0.0-beta.10 before and now I updated to angular-cli#webpack beta.11. After a lot of custom changes I got it to work.
The only thing is that now I can not debug my angular app using webstorm and chrome debugger because I don't get any ts files using ng serve. With angular-cli#1.0.0-beta.10 it was very easy to debug my app using the Jetbrains Plugin.
How can I debug my angular app with Webstorm and the Chrome Debugger using ng serve?
How to debug with angular/cli
The new angular/cli version uses webpack which does not compile the ts files to an local directory like dist before (till beta 1.0.0-beta.10). Now it uses some memory like approach.
But you can find the ts Files in the Chrome Developer Tools in the "Sources" tab.
(new) Solution for angular/cli#1.0.0-beta.26 and newer
Notice: This solution was tested with version 1.0.0-beta.26 and 1.2.1
Notice: In this example I used port 5321 instead of 4200. Just use your port.
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular/cli using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following:
Set your Remote URL Path of your project directory to webpack://.
Set your Remote URL Path of your src directory to webpack://./src
(old) Solution for angular-cli#1.0.0-beta.10 - .14
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular-cli#webpack using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory to
webpack:////Users/...FULL_PATH.. //on Mac OSX
or
webpack:///C:/...FULL_PATH.. //example on Windows
Notice: on Windows you only need 3 slashes, on Mac you need 4 slashes
after "webpack:"
You can also check your Path by going to http://localhost:4200/main.map and search for any ".ts" File. You can easily copy the path of this file and paste it to your IDE Configuration Dialog.
EDIT: Perhaps you need to map the path adding "/src" to your src folder too. Thanks #born2net
Have Fun.
ok got it working,
you need to map both root and src.
see here:
hopefully it helps someone,
let me add that sometimes the debugger will miss your breakpoint so add alert('foo') or ;debugger code just before your breakpoint.
tx
will be adding and convering jspm projects to new cli
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source# https://github.com/born2net/ng2Boilerplate
Regards,
Sean
2017 answer for:
angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
If you are having problems with this, go to your Scripts tab in your debugger and try and align your URL mappings according to what you see.
None of the other answers helped me because my version of angular-cli mapped things a different way.
What finally helped me was to add an additional / (forward slash) after webpack:///, so that there are 4 instead of 3. By default there were 3 forward slashes
The remote URL points to the same parent directory as on the left except the webpack://// schema.
Also you don't need to enable the TS compiler as often suggested.
MacOS
Angular-CLI 2.4.1
WebStorm 2016.3
You can use Augury which is a dev tool extension for the web browsers in order to debug angular applications.
Here is the link you could install:
https://augury.angular.io/
This tool is very useful in viewing the hierarchy of your routing in your application, Module and Components hierarchy and the Dependency Injection overview on each component.
Here is an Inject Graph of my project which illustrate my above explanation:
Please note that the above solutions do NOT let you set breakpoints in the html files of angular components when using IntelliJ. You can only do this in Chrome. I don't understand why this is not possible in IntelliJ.
I've just created a basic plugin which basically adds a live-template / snippet to PHPStorm.
I installed it by zipping the files together, entering PHPStorm > Settings > Plugins and clicking on "Install plugin from disk". After selecting the correct zip file, it appeared in the plugins list, asked me to restart and all worked well - or at least that's what I thought!
My issue is, when I go back to my Settings > Live template the new liveTemplate group doesn't show up and when I try and trigger the live template using "test-tag" followed by TAB it just expands to "" this is not the expected behaviour. Why is this happening??
https://github.com/JasonMortonNZ/test-phpstorm-plugin
NOTE: The strange thing is though, when I install the plugin in Intellij IDEA 13 it works perfectly. The live template group appears in the settings and the live templates trigger fine! Why would this be? Sooo frustrating :(
Please see http://confluence.jetbrains.com/display/IDEADEV/Plugin+Compatibility+with+IntelliJ+Platform+Products on how to make your plugin compatible with other IDEs based on IntelliJ Platform.
I use intelliJ 12 - despite requests from ages ago, it still runs really slowly on a remote connection.
One of the suggested settings is to use
RepaintManager.currentManager(null).setDoubleBufferingEnabled(false);
I have no idea what that means, but I am keen to try it out - can someone let me know how I can execute this command on my intelliJ? So that it will work smoother, i mean?
Original issue has a comment that links to this answer with the link to plug-in jar. Download the jar, Install from disk in Setting | Plugins.
Just updated to IntelliJ 12 from 11. I can't find
deployment feature anymore.
Previously it was in menu Tools > Deployment now its gone. I can't find it in plugin list as well. However according to the Web Help it should be there.
Any idea how to enable it?
EDIT:
I have ultimate edition.
Make sure that Remote Hosts Access plugin (that's the actual name for Deployment functionality) is installed and enabled (though it should be installed and enabled by default, as it is standard functionality .. unless you did some re-configuration at some point (e.g. during upgrading)).
You can also check idea.log (Help | Reveal log in ...) -- it will have a list of all loaded plugins so you can verify if it's loaded or not.
Is it possible with IDEA 12 (like with Eclipse) to automatically add Android support library either on demand or on project creation (like in Eclipse)?
So far we had to go to extras directory in Android SDK and copy the library manually. I wonder if it had changed?!
This functionality is missing right now, please submit a feature request.