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.
xml1<PropertyGroup>2 <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>3 // ...4</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.
xml<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.
xml<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>
).
xml<StartWebBrowser>false</StartWebBrowser>
Putting it all together, you'll end up with a .njsproj
with something like this:
FrontEnd.njsproj1<PropertyGroup>2 <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>3 // ...4 <StartupFile>node_modules\@angular\cli\bin\ng</StartupFile>5 <ScriptArguments>serve --aot --open=true</ScriptArguments>6 <StartWebBrowser>false</StartWebBrowser>7 // ...8 </PropertyGroup>
Further reading...