Unwanted *.js and *.js.map files are being generated from .ts in some areas of project

Question

I am developing an angular cli v6 project in visual studio 2017 and noticing that unwanted .js and .js.map`files are being generated for some of my typescript files in the same folder. (I don't want any generated)

I am noticing that any files inside of folders named after angular elements ('services', 'resolvers', 'components','directives') don't seem to create these extra files.

For example, if I create my-component.component.ts within the components folder, no extra js/js.map files are generated.

My question is twofold:

1. What is the criteria that determines if these extra files are generated?
2. How do I prevent them from being generated

Project File structure (showing unwanted files)

 src
 |-- app
 |   |-- components (no generated js/js.map files here)
 |   |   |-- my-component.component.ts
 |   | 
 |   |-- resolvers  (no generated js/js.map files here)
 |   |   |-- my-resolver.resolver.ts
 |   |
 |   |-- services   (no generated js/js.map files here) 
 |   |   |-- my-service.service.ts
 |   |
 |   |-- types      (has generated js/js.map files)
 |   |   |-- my-type.type.js  **dont want this file!**
 |   |   |-- my-type.type.js.map **dont want this file!**
 |   |   |-- my-type.type.ts

Here is my tsconfig.json file

ClientApp/tsconfig.json

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

ClientApp/src/tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

ClientApp/src/tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

ClientApp/e2e/tsconfig.e2e.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

Excitable

How did you create your project? With angular-cli? Do have several tsconfig files in your project? – Hypotaxis

@Hypotaxis Yes, this was created initially with angular-cli 1, then upgraded to v6. I've updated the question with the tsconfig.*.json files – Excitable

Looks fine to me. So there are several possibilities. Some IDEs ask if it should automatically compile TS to JS. And then the files can be hidden. Have you changed the IDE lately? From Intelli/webstorm etcj to VSCode or something like that? Are the files generated after you manually delete them (for example after a complete restart of your system?). The behavior makes no sense with angular or even ts-node running from command line – Hypotaxis

@EricPhillips Did you found any solution/workaround? – Hanover

I have not found a solution yet – Excitable

Answer 1

What worked for me is adding noEmit: true and sourceMap: false into my ts.config.json file.

Carlynne

Answer 2

First, that is how TypeScript works. When you run "tsc" command TypeScript compiles(transpiles) into JavaScript, and that is why .js files are generated. If you will look into your compiled .js, you will see your code, written in the best JavaScript way possible.

Second, .map files are provided for different reasons. Mostly for debugging, like in Chrome Dev Tools, etc. Please refer to this link: What is a TypeScript Map file?

If you still don't want .map files you can change "sourceMap" to false in your tsconfig.json.

Chignon

Note that Eric has set the outDir within his tsconfig.json, so he's presumably expecting the generated files in that folder, rather than next to the source files. It seems to me it's reasonable for him to ask why they're being generated next to the source .ts files. – Without

@Tim, didn't notice that, thanks. Maybe, it is a bug that was in angular cli 1. Reference: link. Now it is fixed and upgrading should do the job for you. – Chignon

This is not necessarily how typescript works. Its true that the compiler will generate a file, but that file can be redirected to a different location. The angular CLI for example uses a custom folder. VS is the tool that is running tsc - probably for intellisense or validation - and creating these junk files. – Careerist

Answer 3

This will be caused by some process invoking the tsc command with a different configuration to the one you gave in your question.

I would be surprised if this was the angular-cli, and so my suspicion would be on visual studio itself.

In your visual studio project settings have a look for typescript options and try disabling compile on save / similar

Also, it would be worth checking your project directory for any other tsconfig files, in case there is another configuration that is causing the incorrect behavior.

Of course you'll need to manually remove the two files and see if they come back after making any changes.

Mol

yes, there are additional tsconfig.*.json files. I've updated the question – Excitable

Have you checked your visual studio project settings? All those tsconfig files look fine, and I don't think the angular-cli will be misinterpreting them, I would suggest closing all IDE's, deleting the unwanted files and running ng serve and seeing if they return. If they don't return, but do return after you open your IDE and start editing files then we can be pretty certain it is a configuration issue with your IDE. – Mol

Thanks for the direction, I was going down all the wrong paths. with ng serve files did not return, so I am now looking into the IDE configuration as you recommended – Excitable

Answer 4

if you using visual studio code, go to setting:

step 1: search "compile"

step 2: go to setting of "Compile hero configuration"

step 3: turn of compile-hero like image

Bestride