Skip to content
Nate Radebaugh
Nate Radebaugh
Home
GitHub
Twitter
LinkedIn
Resume

How to Launch Angular for Development from Visual Studio Projects

April 13, 2020 2:58 PM

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.

  1. 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.

    xml
    1<PropertyGroup>
    2 <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    3 // ...
    4</PropertyGroup>
  2. .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>
  3. 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>
  4. 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.njsproj
1<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...