title: ASP.NET Core with Angular CLI and Live Reload
body: <p>I'm trying to set up an ASP.NET Core project with an Angular CLI generated Angular app.</p>
  
  <p>I have the two things set up so that I can:</p>
  
  <ul>
  <li>Start and debug the server (ASP.NET Core) via F5 in VS Code</li>
  <li>Build the Angular app and watch for changes using <code>ng build --watch</code> via the terminal.</li>
  </ul>
  
  <p>Now, I'd like to combine these two things, so that the Angular files are automatically built and watched when I'm debugging the ASP.NET Core project. But I'm not sure how to. I've tried this in my <code>.csproj</code>-file:</p>
  
  <pre><code>&lt;Target Name="PostcompileScript" AfterTargets="Build"&gt;
   &lt;Exec Command="ng build --watch" /&gt;
  &lt;/Target&gt;
  </code></pre>
  
  <p>But that will get stuck on the <code>watch</code> part and not continue debugging the project.</p>
  
  <p>Any ideas on how I can get this working?</p>
  
  <p>What I'm aiming for:</p>
  
  <ul>
  <li>An Angular application hosted in an ASP.NET Core project (instead of <code>ng serve</code>)</li>
  <li>Using <code>ng build</code> instead of running custom webpack scripts</li>
  <li>Some kind of Live Reload so that changes to my <code>ts</code> files are automatically updated in the browser while debugging.</li>
  </ul>
  
  <p>Is that possible?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I don't think it is relevant, but here is my angular cli config file:</p>
  
  <pre><code>{
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "project": {
          "name": "my-app"
      },
      "apps": [
          {
              "root": "src",
              "outDir": "wwwroot",
              "assets": [
                  "assets",
                  "content/imgs",
                  "favicon.ico"
              ],
              "index": "index.html",
              "main": "app.ts",
              "polyfills": "polyfills.ts",
              "tsconfig": "tsconfig.app.json",
              "prefix": "app",
              "styles": [
                  "content/styles/styles.scss"
              ],
              "scripts": [],
              "environmentSource": "environments/environment.ts",
              "environments": {
                  "dev": "environments/environment.ts",
                  "testing": "environments/environment.testing.ts",
                  "prod": "environments/environment.prod.ts"
              }
          }
      ],
      "defaults": {
          "styleExt": "scss",
          "component": {}
      }
  }
  </code></pre>
  
  <p>And the <code>.csproj</code> file:</p>
  
  <pre><code>&lt;Project Sdk="Microsoft.NET.Sdk.Web"&gt;
  
  &lt;PropertyGroup&gt;
      &lt;TargetFramework&gt;netcoreapp1.1&lt;/TargetFramework&gt;
  &lt;/PropertyGroup&gt;
  
  
  &lt;ItemGroup&gt;
      &lt;PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" /&gt;
      &lt;PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" /&gt;
      &lt;PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" /&gt;
      &lt;PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" /&gt;
      &lt;PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="1.1.0" /&gt;
  &lt;/ItemGroup&gt;
  
  &lt;Target Name="PostcompileScript" AfterTargets="Build"&gt;
      &lt;Exec Command="ng build --watch" /&gt;
  &lt;/Target&gt;
  
  &lt;/Project&gt;
  </code></pre>