Compile on save in tsconfig.json works differently for new files than it does for existing files

Question

So I've been experimenting around with Angular lately and its features. One of them is the CompileOnSave feature in the tsconfig.json with the following settings:

"outDir": "./dist/out-tsc",
"watch":  true,

This all works, however, I'm seeing different behavior between adding new files and modifying existing files. In both cases, file modifications get compiled to the ./dist/out-tsc folder. All good. However, when adding a new file the compiler also generates a .js file and its corresponding map file in the same folder. This is confusing. Is this by design? And should I delete them manually or can this be automated? My question is similar to

How can I get the Typescript compiler to output the compiled js to a different directory?

however, I already have the outDir property configured. I am using Visual Studio 2019. Please see the screenshot below from a part of the project directory. api.component.ts is an existing file which modifications are compiled to the ./dist/out-tsc directory. file.ts, file1.ts and file2.ts are new files which seem to be compiled to the folder they are created in, as well as to the ./dist-out-tsc folder. My Angular version is 8.3.14.

screenprint from visual studio

My tsconfig.json looks like this:

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "watch": true,
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

score 0 · Accepted Answer · answered Feb 20 '21 at 13:42

I solved my problem by adding this to my .csproj file. I want to emphasize however, that compile on save was already turned OFF in Visual Studio and visual studio restarted. That's why I was thrown off guard. Guess this wasn't enough.

<PropertyGroup>
   <TypeScriptCompileOnSaveEnabled>False</TypeScriptCompileOnSaveEnabled>
</PropertyGroup>

Compile on save in tsconfig.json works differently for new files than it does for existing files

1 Answers1