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

Answer 1

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.

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.

Answer 3

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