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"
]
}
}
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>