是否可以在Visual Studio 2017中运行Angular应用程序时编辑HTML文件？

Question

我有什么

我是Angular的新手，我很欣赏它不是为了从Visual Studio 2017运行而设计的，但它看起来确实可以完成，甚至还有一个VS项目模板。

现在，我的代码完全是来自此项目模板的默认代码：

  

VS 2017＆gt;新项目＆gt;网络＆gt; ASP.NET核心Web应用程序（.NET   框架4.6）＆gt;角

然后我可以构建并运行该项目，它最终会在浏览器中加载并按预期工作。但请注意，从“开始”（调试＆gt;开始调试）到实际渲染应用程序需要相当长的时间 - 这不仅仅是一次性的。

我想做什么

现在，我想要做的是在应用程序仍在运行时编辑任何Angular HTML文件 并在应用程序中反映我的更改（即使这意味着刷新网页） 。例如，我想在文件中添加一个新的HTML元素：

  

\ ClientApp \应用\部件\应用\ app.components.html

问题

问题是，虽然我可以正常查看和编辑文件，但当我尝试保存更改时，Visual Studio会进入“中断模式”，如下所示：

这需要我停止应用程序运行，保存文件，然后再次启动应用程序（这需要相当长的时间，很容易超过20秒或每次更改）...这总体上非常耗时（特别是在学习的时候） Angular）我发现它非常无益且烦人。

问题

所以基本上，我的问题是，有什么办法可以解决这个问题吗？有没有办法在运行应用程序时启用编辑HTML文件？或者这是我必须忍受的东西？

Answer 1

如果您使用的是Visual Studio 2017附带的Angular模板（as detailed here），那么您的项目中应该有一个名为“ClientApp”的文件夹。

使用命令提示符导航到“ClientApp”文件夹并运行命令：

  

ng serve

这将托管Angular应用程序并告知您可以通过浏览器访问它的URL，默认情况下会是：http://localhost:4200/

现在，只要您更改并保存任何文件，页面就会自动刷新。

Answer 2

我在ASP.NET解决方案中也有一个Angular应用程序（并且正在使用VS2017）。

使用Angular CLI运行ng build --watch。无论何时保存html，css，ts / js，它都会重新编译你的Angular应用程序。简单的页面刷新将反映任何更改。

如果您没有设置Angular CLI，则需要全局安装npm i -g @angular/cli。从Angular应用程序根目录，您可以运行ng build命令。