CODEWITHSUNDEEP
asp.net-mvcangularvisual-studio
egurb
egurb

Reputation: 1216

Using Angular's ng serve/ng build --watch in ASP.Net Project in Visual Studio

I am trying to setup Angular CLI to an ASP.Net MVC project using the tutorial.

When all described steps are done, I can run my project successfully, but the problem is that, the project must be rebuilt every time there were any changes made, which is pretty much annoying.

According to the tutorial, the Angular's build command is handled by the following script addition to the .csproj file:

<Target Name="NgDebug" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug'">
  <Exec WorkingDirectory="$(ProjectDir)HelloAngular" Command="ng build -ec" />
</Target>

I tried replacing the 'ng build' with 'ng build --watch' and 'ng serve', but none of them worked. Build just hangs on the following step:

------ Build started: Project: Properties Web, Configuration: Debug Any CPU ------

Other than that, I tried to set 'CompileOnSave' to 'true' in TS Config file, but this one didn't help as well.

I am using Visual Studio 2017, and all the latest versions of Node, NPM, and Angular CLi.

Any suggestion are welcome. Thanks in advance.

Upvotes: 3

Views: 7542

Answers (3)

joelmdev
joelmdev

Reputation: 11773

Using the --watch flag on ng build will not work if you use it in an Exec as part of a build target as it keeps the process open to watch for file changes to the Angular project. Using ng serve will hang the build for the same reason.

As recommended by Tai Le, you'll need to run these ongoing processes in a separate command window, or stick with rebuilding on changes to allow VS to take care of it for you with the build target you've included in your csproj file.

Upvotes: 0

Tai Le
Tai Le

Reputation: 21

I assume that you don't want to rebuild the whole angular app whenever the C# code changed, but you want to watch for changes in your Angular app to rebuild automatically.

To achieve that, you have to run ng build --watch --ec commands in a separate Terminal (cmd or Gitbash). This will watch the changes in Angular app for you.

Also, you need to remove the Target NgDebug in your build config file to prevent Visual studio rebuild the Angular App every time you rebuild the C# code.

Upvotes: 1

Pervez Meah
Pervez Meah

Reputation: 1

please use ng build --watch --ec it's worked for me.

Upvotes: 0

Related Questions