首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使Visual Studio调试器自动刷新Angular 6应用程序,如ng serve

在Visual Studio中调试Angular 6应用程序时,可以通过以下步骤使调试器自动刷新应用程序:

  1. 确保已安装Angular CLI,并在项目根目录下打开命令行终端。
  2. 运行以下命令以启动Angular开发服务器:ng serve这将启动开发服务器并自动监视文件更改。
  3. 在Visual Studio中打开Angular项目。
  4. 在Visual Studio的“调试”菜单中,选择“附加到进程”选项。
  5. 在弹出的对话框中,选择运行Angular开发服务器的进程。通常,该进程名称为“node.exe”。
  6. 确保选择了正确的调试器(例如,Chrome调试器)。
  7. 单击“附加”按钮以附加调试器到Angular开发服务器进程。
  8. 现在,您可以在Visual Studio中设置断点并进行调试。
  9. 当您进行更改并保存文件时,Angular开发服务器将自动检测到更改并重新编译应用程序。此时,调试器将自动刷新应用程序以反映更改。

这种方法可以确保在调试过程中保持应用程序的实时更新,并且可以方便地进行断点调试和错误排查。

请注意,这里没有提及任何特定的云计算品牌商,但您可以根据需要选择适合您的云计算平台来部署和托管您的Angular应用程序。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何在 ASP.NET MVC 中集成 AngularJS(1)

创建 MVC 项目并安装 Angular NuGet 包 为了开始示例应用程序,我通过在 Visual Studio 2013 专业版中选择 ASP.NET Web 应用程序模板来创建一个 ASP.NET...precondition="integratedMode" type="System.Web.StaticFileHandler"/> 应用程序版本自动刷新和工程构建...对于这种应用,我使用的 Visual Studio 2013 专业版,这让一切变得简单,我为 Visual Studio2013 专业版下载了一个自动版本的插件 https://visualstudiogallery.msdn.microsoft.com.../dd8c5682-58a4-4c13-a0b4-9eadaba919fe 它会自动刷新 C# 和 VB.NET 项目的版本。...ASP.NET MVC开发时,可以借助 ComponentOne Studio ASP.NET MVC 这一款轻量级控件,它与 Visual Studio 无缝集成,完全与 MVC6 和 ASP.NET

7.5K60

看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件

Angular15新特性 Angular框架(以下简称“Angular”)作为一款由谷歌开发的Web应用程序框架,其强大的依赖注入系统、可重复使用的模块化开发理念和响应式编程模式等特点让Angular一问世便取得了巨大的关注和流量...的情况下构建应用程序。...语言服务中的自动导入 在Angular15中,可以自动导入在模板中使用但是没有添加到NgModule中的组 件或独立组件。 既然Angular都升级了,咱们是不是可以尝试一些新的玩法?...除此之外还需要使用软件Visual Studio Code(以下简称“VSCode”)作为编程环境,请您以管理员身份运行它。...(初始化一个Angular工程) 将下面的表格资源粘贴到package.json文件中的dependencies标签,并使用npm install指令下载和ng serve指令运行。

28510

Angular 2.x折腾记 :(1)初识Angular-cli及脱坑要点

编译node-sass编译报错 装visual studio 2015+及python2+ 采用国内的cnpm安装 记得带版本号,有时候不带版本会安装0.0.1版本,cnpm好像会把编译好node-sass...e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix -...-format可以帮助格式和修复部分问题 启动 ng serve: 启动脚手架服务,默认端口4200;自定义什么看帮助额 打包 ng build: 开发模式打包,调用的环境文件是/src/environments.../environments.ts; ng build --prod: 以前调用aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 调用的环境文件是/src/environments...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

11410

angular入门教程_初学者织围巾简单教程慢动作

Python 和Visual Studio 环境,而很多开发者的机器上并没有安装这些东西。...: ng new HelloAngular @angular/cli 将会自动帮你把目录结构创建好,并且会自动生成一些模板化的文件,就像这样: 请特别注意:@angular/cli 在自动生成好项目骨架之后...ng 提供了很多非常好用的工具,除了可以利用 ng new 来自动创建项目骨架之外,它还可以帮助我们创建 Angular 里面所涉及到的很多模块,最常用的几个如下: 自动创建组件:ng generate...所以,Visual Studio Code(简称 VS Code)才会呈现出爆炸性增长的趋势。它是微软开发的一款前端编辑器,完全开源免费。...serve 启动项目,然后从 VS Code 的 debug 界面启动 Chrome: 注意,你可能需要 F5 刷新一下 Chrome 才能进入断点!

3.3K20

Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

---- 什么是Angular-cli 简言之:就是NG团队自行维护的一个`脚手架`[内置单元测试及webpack2打包工具等] -- 这货前身是ember-cli; 官网:cli.angular.io...装不上的 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译] 或者采用国内的cnpm安装,记得带版本号,有时候不带版本会安装0.0.1...module my-module 新建一个模块 ---- 测试及检测 范围 命令 作用 e2e ng e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint...ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix --format可以帮助格式和修复部分问题 ---- 启动 ng serve: 启动脚手架服务,默认端口...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

1.8K10

Angular 6正式版发布,都有哪些新功能

如果你的某个依赖包提供了ng update schematic,那么它在进行重大更改时会自动更新代码!...同时,这个命令还能自动安装rxjs-compat到你的应用程序中,以使 RxJS v6 更加流畅。...CLI v6 现已支持多项目工作区,多个应用程序或库,CLI 项目用 angular.json 取代 angular-cli.json 构建和配置项目。...RxJS v6 Angular 6 也将支持RxJS v6,RxJS v6 于上个月发布。RxJS v6 带来了一个向后兼容的软件包 rxjs-compat,它可以让你的应用程序保持运行。...之前只有 v4 和 v6 是 LTS 版本,但为了使开发者从一个主版本更新到另一个主版本更容易,并给予项目充足的时间来规划更新,Angular 团队表示从 v4 开始,将扩大对所有主版本的长期支持。

4.2K20

Script Lab 11:OIfficeJS的三种调试方式

6、运行以下命令以引导主机应用程序(例如Excel,Word)并在主机应用程序中注册您的加载项: npm run sideload ? 接着会自动启动桌面Excel并加载该插件。...无论您使用的是Yeoman Generator,Visual Studio Code,node.js,Angular还是其他工具,都可以附加调试器。...1、在Office 2016 for Windows 的较高版本中,可以从任务窗格附加调试器; 2、前提是电脑上己经装有 Visual Studio 2015 或更高版本; 3、只适用于桌面加载的插件,...这将启动Visual Studio实时调试器对话框,如下图所示。 ? 在Visual Studio中,您将在解决方案资源管理器中看到代码文件。...如果您没有使用像Visual Studio这样的IDE,或者您需要在IDE外部运行加载项时调查问题,也可以使用它们来开发和调试Office加载项。

2.2K20

.NET程序员必备的58个提高效率工具

Visual Studio Visual Studio Productivity Power tool:Visual Studio 专业版(及以上)的扩展,具有丰富的功能,快速查找,导航解决方案,可搜索的附加参考对话框等...在远程调试时,Visual Studio 运行在一台计算机(调试器主机)上,远程调试监视器运行与你正在调试的应用程序运行在一台远程计算机上。...OzCode:强大的 Visual Studio 调试器可视化工具。 CodeRush:这是一个 Visual Studio 的重构和生产率插件。...Visual Studio Code:免费的跨平台编辑器,用来构建和调试现代 web 和云的应用程序。...Protractor:端到端的框架用来测试 angular 应用程序。 Batarang:添加工具用于调试和分析 AngularJS 应用程序。 9.

4K60

如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

什么是 Angular CLI? Angular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具( TypeScript、Webpack 等)的麻烦。...近年来,它还被用来发布前端包和库, Angular、React、Vue.js 甚至 Bootstrap。...serve (s): 构建并服务您的应用程序,根据文件更改进行重建。 test (t): 在项目中运行单元测试。 update: 更新您的应用程序及其依赖项。...因此,您不需要安装本地服务器来为您的项目提供服务 —您可以简单地从终端使用 ng serve 命令在本地为您的项目提供服务。...首先导航到项目的文件夹中并运行以下命令: $ cd frontend $ ng serve 您现在可以导航到 http://localhost:4200/ 地址来开始使用您的前端应用程序

11400

Angular 工具篇之VSCode调试

Visual Studio Code (简称 VS Code / VSC) 是一款由微软开发的跨平台编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段...之后,在项目的根目录下会生成一个 .vscode 目录,该目录下也会自动生成一个 launch.json 文件: { // 使用 IntelliSense 了解相关属性。...应用程序的地址,通常情况下,在开发阶段我们会使用 Angular CLI 来辅助开发,使用 Angular CLI 我们可以运行以下命令来启动本地服务器: $ ng serve 因为该服务器的默认端口是...应用程序: ?...上面我们已经介绍如何使用 VSCode 和 Chrome 调试 Angular 应用程序。其实除了 Chrome 浏览器之外,在 VSCode 中我们也可以使用 Firefox 或 Edge 浏览器。

1.9K10

Visual Studio 调试系列12 远程调试部署在远程计算机IIS上的ASP.NET应用程序

下面介绍如何设置和配置Visual Studio ASP.NET MVC 4.5.2应用程序,将其部署到IIS,以及如何从Visual Studio附加远程调试器。...创建发布设置文件时,权限自动将会在 IIS 中设置。 部署发布到本地文件夹并将输出的首选方法复制到 IIS 上的已准备好应用程序文件夹。...》 11 设置 Windows Server 上的远程调试器 参考《Visual Studio 调试系列11 远程调试》 12 从 Visual Studio 计算机附加到 ASP.NET 应用程序...在某些情况下,用户名列显示你的应用程序池名称,IIS APPPOOL\DefaultAppPool。...UDP 3702 - (可选)在Visual Studio中附加到远程调试器时,发现端口使您可以使用“ 查找”按钮。

3.9K10

Java开发环境系列:前端利器angular安装与使用

cli npm install -g @angular/cli 4、创建新项目 打开终端窗口,执行命令 ng new my-app 5、启动开发服务器 cd my-app ng serve --open...ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。...使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。...本应用会用一条消息来跟你打招呼: The app works 6、编辑我们的第一个angular组件 这个CLI为我们创建了第一个Angular组件。 它就是名叫app-root的根组件。 你可以在....改为 My First Angular App : export class AppComponent {   title = 'My First Angular App'; } 浏览器会自动刷新,而我们会看到修改之后的标题

88420

Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

自动内联字体 为了加快应用的第一次内容绘制,从而让你的应用变得更快,我们引入了自动字体内联。在编译时,Angular CLI 将下载和内联在应用程序中使用和链接的字体。...manualChangeDetection 函数可以用来禁用单元测试中的自动更改检测,使开发人员可以更精细地控制更改检测。...在版本 11 中我们更新了 CLI,允许开发人员在使用 ng serve 启动应用程序时启用 HMR。...只需运行以下命令: ng serve --hmr 本地服务器启动后,控制台将显示一条消息,确认 HMR 处于活跃 5 状态: NOTICE: Hot Module Replacement (HMR) is...如何获取版本 11 更新 当你准备好时,请运行以下命令来更新 Angular 和 CLI: ng update @angular/cli @angular/core 可以前往 update.angular.io

3.3K30

2023 年web开发人员必须知道的 JavaScript 开发工具

IDEs Visual Studio Code Visual Studio Code 被评为 JavaScript 开发的最佳领先工具或 IDE(集成开发环境)。...项目管理也是 Eclipse 的一个关键特性,它使自动化功能更易于访问。此外,为了提高其性能,它支持 Docker 映像、新的 Docker UI 和 Docker CLI。...它还有助于执行同时编辑(对多个选定区域进行相同的交互式更改)以及快速导航到文件, 其特点 支持自动化 可以处理多个项目 命令行编辑器 好用的功能,“转到符号”和“转到定义” 改进的窗格管理 Frameworks...Angular Angular 是由 Google 开发的强大 JavaScript 框架,可在速度、响应式 UI 和各种其他因素方面提升您的应用程序。...它具有将 HTML 扩展到应用程序中的依赖注入和数据绑定的功能。 命令npm install -g @angular/CLI全局安装 Angular

21210
领券