I’m working on a legacy, rather outdated MVC project, where I’ve been tasked with adding several major new features. Although most of the UI is in Razor, one of the features will involve a fair bit of Javascript. To make my life easier, I decided to write Typescript instead.
Making Visual Studio 2022 transpile the Typescript to Javascript was straightforward and works normally when building the project. The problem is that I also want to rebuild the Typescript code when running Hot Reload.
If I make a change to a Typescript file and click Hot Reload, I get a message stating that there are no code changes. Since this is clearly false, it leads me to believe that Visual Studio isn’t watching my Typescript files for changes.
After being unable to find any information on how to make VS do what I want, I came across a suggestion to instead run tsc --watch
and have the Typescript compiler do the watching instead. It’s a bit ugly and really isn’t the right approach, but if I could get it to work I would accept it and move on. Alas, when building I haven’t found a way to run a background process.
I’ve now got the following in my .csproj
file:
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<!-- other stuff here -->
<!--
Taken from https://www.meziantou.net/running-npm-tasks-when-building-a-dotnet-project.htm
-->
<Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
<Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
<Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
<!-- Write the stamp file, so incremental builds work -->
<Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
</Target>
<!--
2. Run npm run build before building the .NET project.
MSBuild runs NpmInstall before this task because of the DependsOnTargets attribute.
-->
<Target Name="NpmRunBuild" DependsOnTargets="NpmInstall" BeforeTargets="BeforeBuild">
<Exec Command="npm run build" />
</Target>
<Target Name="NpmRunWatch" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug'">
<Exec Command="start npm run watch" />
</Target>
NpmRunWatch
is supposed to run the Typescript watch process. However, despite trying many different variants of the code above, I haven’t been able to get it to run in the background. Instead, the build system waits for the watch process to exit before continuing, which defeats the purpose.
So, I’m looking for one of the following solutions:
-
Configure Visual Studio to watch my Typescript source files for changes and rebuild when I click the Hot Reload button. I would also accept a rebuild when any file that’s included in the project changes, or even an unconditional rebuild based solely on the activation of the Hot Reload button.
-
A way to make my
npm run watch
kludge work such that the watch process runs in the background without interfering with the rest of the build. -
Frame challenge. Am I going about this all wrong?
2
Answers
Dou Xu-MSFT linked to this question, which gave me the information to solve the problem.
The key is that the
tsconfig.json
file needs to have thecompileOnSave
root-level option set totrue
. Here's an example (see the first line):About your solution 1:
From looking at .NET and native C++ apps, i think Visual Studio’s native Hot Reload primarily supports .NET and C++ projects not for typescript files. That’s why you get a message stating that there are no code changes.
Based on my test, i found if you enable
Hot Reload on File Save
and save the typescript file after modifying changes, the VS can detect typescript file changes.Besides, you can use external tools like
nodemon
andts-node
to achieve it.nodemon
ts-node
A similar ticket attached