April 13, 2020
It can a bit tricky to configure Visual Studio .njsproj
projects to work well with front-end applications for development. Wire up your <StartupFile>
and <ScriptArguments>
for guarenteed success.
You'll want to make sure these settings are only going to apply when you're working with a Debug configuration, so it won't apply in production.
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
// ...
</PropertyGroup>
.njsproj
doesn't know how to use your "start" or "dev" scripts from you package.json
, so you'll need to explicitly list out the path to your CLI in the <StartupFile>
tag.
<StartupFile>node_modules\@angular\cli\bin\ng</StartupFile>
Adding arguments via <StartupFile>
doesn't work, so you'll have to explicitly list them in the <ScriptArguments>
tag instead.
<ScriptArguments>serve --aot --open=true</ScriptArguments>
To avoid race conditions where VS tries to launch your app's server before the CLI is finished getting it started, you'll want to use the CLI's --open=true
setting directly (instead of <StartWebBrowser>
).
<StartWebBrowser>false</StartWebBrowser>
Putting it all together, you'll end up with a .njsproj
with something like this:
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
// ...
<StartupFile>node_modules\@angular\cli\bin\ng</StartupFile>
<ScriptArguments>serve --aot --open=true</ScriptArguments>
<StartWebBrowser>false</StartWebBrowser>
// ...
</PropertyGroup>
Further reading...