How to use Angular-CLI with Visual Studio 2017 Wit

Question

The problem I've encountered is in a solution with many projects (one of them being a angular-cli project targeting es5) is that, since Microsoft developed Typescript, they are over eager to attempt to compile without fully knowing the angular-cli story. Therefore (TS) errors frustratingly crop up frequently between builds and hide what would otherwise be a valid error.

How can I ensure that Visual Studio will ignore these Typescript errors and not show them at all post-build?

Answer 1

Turns out, since angular-cli uses it's own configuration file for builds, it's safe to modify the tsconfig.json file that Microsoft checks before builds. My solution was to modify my tsconfig.json as follows:

{
  "exclude": [
    "node_modules/*",
    "src/*",
    "app/*",
    "@angular/*",
    "package.json"
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./wwwroot",
    ...
    "experimentalDecorators": true,
    "target": "es6",
  ...
  },
  "ignoreRules": {
    "TS2307": true,
    "TS2304": true,
    "TS2693": true
  }
}

Effectively blocking Visual Studio compilation and instead defaulting to ng-build (which itself is configured to output to wwwroot) Which also plays nice when hitting the "run" button in Visual Studio.

.csproj

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

...

  <Target Name="DebugRunWebpack" BeforeTargets="Build">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="false">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Exec Command="npm install" />
    <Exec Command="ng build --env=$(Configuration)" />
  </Target> 

angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "wwwroot",
...

One more thing...

You'll also have to set the default path in your Startup.cs file:

 context.Request.Path = "/index.html";