本文介绍了如何使用angular-cli webpack调试角度app?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 之前我使用过angular-cli@1.0.0-beta.10,现在我更新到angular-cli @ webpack beta.11。经过大量的自定义更改,我得到了它的工作。 唯一的问题是现在我无法使用webstorm和chrome调试器调试我的角度应用程序,因为我没有使用ng服务获取任何ts文件。使用angular-cli@1.0.0-beta.10使用Jetbrains插件调试我的应用程序非常容易。 如何使用Webstorm调试我的角度应用程序Chrome调试器使用ng服务?解决方案 如何使用angular / cli进行调试 新的angular / cli版本使用webpack,它不会将ts文件编译到dist之前的本地目录(直到beta 1.0.0-beta.10)。现在它使用一些类似内存的方法。 但您可以在源代码选项卡中的Chrome开发者工具中找到ts文件。 (新)angular / cli@1.0.0-beta.26和更新的解决方案 使用Chrome开发者工具进行调试 在运行ng服务(也用于npm start)时,您可以在Chrome开发者工具部分找到您的来源:webpack://: 使用JetBrains IDE调整角度/ cli的Angular 2应用 只需编辑Run / Debug Confi即可Webstorm / PHPStorm中的guration以下内容: 将项目目录的远程URL路径设置为 webpack:// 。 将src目录的远程URL路径设置为 webpack://。/ src 使用angular-cli @ webpack调试Angular 2应用程序JetBrains IDE 只需将Webstorm / PHPStorm中的运行/调试配置编辑为以下内容:将项目目录的远程URL路径设置为 webpack:// //Users/...FULL_PATH .. //在Mac OSX上 或 webpack:// /C:/...FULL_PATH .. // Windows上的示例您还可以通过转到 编辑:也许您需要将添加/ src的路径映射到您的src文件夹。谢谢@ born2net 玩得开心。 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/cliThe 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 newerDebugging with Chrome Developer ToolsWhile 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 IDEJust 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 - .14Debugging with Chrome Developer ToolsWhile 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 IDEJust edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory towebpack:////Users/...FULL_PATH.. //on Mac OSXorwebpack:///C:/...FULL_PATH.. //example on WindowsYou 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 @born2netHave Fun. 这篇关于如何使用angular-cli webpack调试角度app?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-04 10:57
查看更多