I have an angular-cli based project in Visual Studio 2017. I followed the below link for this setup and it works. /

I have the following in my Pre-Build events:

echo "cd $(SolutionDir)" &&^
cd "$(SolutionDir)" &&^
echo "Building Project" &&^
ng build &&^
echo 'copy files' &&^

This works fine when I Build or Rebuild the project in Visual Studio. It generates the bundle files in my output directory based in angular-cli.json.

But I need a way to watch for changes in ng build from inside Visual Studio. I tried ng build --watch in Pre Build events, but after making this change, my Build process stucks. I can see the output directory getting generated with all the correct bundle files, but the build process never pletes in Visual Studio 2017.

As a work around, I am not running ng build --watch in a separate mand window. This works and watch for TypeScript, HTML, CSS changes and rebuilds (as expected). But would like to integrate this inside Visual Studio 2017.

Note: I already have "pileOnSave": true in my tsconfig.json, but its not same as ng build. Thanks.

I have an angular-cli based project in Visual Studio 2017. I followed the below link for this setup and it works. http://candordeveloper./2017/04/12/how-to-use-angular-cli-with-visual-studio-2017/

I have the following in my Pre-Build events:

echo "cd $(SolutionDir)" &&^
cd "$(SolutionDir)" &&^
echo "Building Project" &&^
ng build &&^
echo 'copy files' &&^

This works fine when I Build or Rebuild the project in Visual Studio. It generates the bundle files in my output directory based in angular-cli.json.

But I need a way to watch for changes in ng build from inside Visual Studio. I tried ng build --watch in Pre Build events, but after making this change, my Build process stucks. I can see the output directory getting generated with all the correct bundle files, but the build process never pletes in Visual Studio 2017.

As a work around, I am not running ng build --watch in a separate mand window. This works and watch for TypeScript, HTML, CSS changes and rebuilds (as expected). But would like to integrate this inside Visual Studio 2017.

Note: I already have "pileOnSave": true in my tsconfig.json, but its not same as ng build. Thanks.

• javascript
• angularjs
• build
• visual-studio-2017
• watch

2 Answers 2

If anyone is still looking for an answer, this is what I've added to the Pre-build event in VStudio:

powershell start-process "cmd " """/k ng build --watch"""

It opens a new cmd window, starts the ng build process and keeps waiting for changes. Granted, you have to kill the cmd window once you are done with your debug session. Otherwise, it will open a new cmd window the next time you hit F5

I think the reason it doesn't work as part of a build event in Visual Studio is that Visual Studio is waiting for the script to finish before moving on with the build process. When watching, the script never "finishes" as its constantly monitoring for changes as part of the Angular CLI build process.

Personally looking to automate this myself.