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?
Best Answer
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
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:
webpack://.
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
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.