66

Is there any way to have the TypeScript compiler also copy content files that don't have a ts or tsx extension to the output directory?

For example, my tsconfig.json looks like:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "../../dist",
        "types": [
        ]
    },
    "include": [
        "file1.ts",
        "config.json"
    ],
    "exclude": [
        "../../node_modules"
    ]
}

I would like the config.json to end up in my ../../dist directory, but this isn't happening. Is there no concept of a content file for TypeScript?

Brian Vallelunga
  • 9,869
  • 15
  • 60
  • 87

4 Answers4

156

This can be achieved by setting "resolveJsonModule": true in the compiler options and adding "source-path/**/*.json" to the include array in the tsconfig.json

Arun Reddy
  • 3,443
  • 1
  • 21
  • 16
  • 13
    I had `"source-path/**/*"` in my `"include"` property, which DOES NOT work. As says the [Official tsconfig.json documentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) : `If a segment of a glob pattern includes only * or .*, then only files with supported extensions are included (e.g. .ts, .tsx, and .d.ts by default with .js and .jsx if allowJs is set to true).` – ttous Jun 19 '19 at 15:21
  • @JRadness this doesn't work for me. Do you have any other compiler options in the tsconfig.json? – th3r1singking Aug 07 '19 at 14:14
  • @th3r1singking Here is my whole file currently `{ "compilerOptions": { "experimentalDecorators": true, "resolveJsonModule": true, "allowJs": true, "target": "es6", "jsx": "react", "moduleResolution": "node", "module": "commonjs", "noImplicitAny": true, "outDir": "dist", }, "include": [ "src/**/*" ] }` – JRadness Aug 08 '19 at 18:38
  • 2
    Please note that `"resolveJsonModule": true` only copies `import`ed json files. It does not copy _all_ json files, or `require`d json files. – joeytwiddle Dec 20 '19 at 02:59
  • The strange thing here is that `resolveJsonModule: true` should work by itself, but I find that you must also use `**/*.json`. That is `**/*` is not enough. So you need both... – CMCDragonkai Nov 05 '21 at 06:00
  • Works placing it to the `files` array instead of `include` – Anson Sep 05 '22 at 15:39
14

I was having the same problem and the solution for this was to add:

"source-path/**/*.json"

keeping into "includes" array:

"source-path/**/*"

Example:

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "resolveJsonModule": true,
    "incremental": true
  },
  "include":[ 
    "src/**/*",
    "src/**/*.json",
  ],
}
Rodrigo Alcorta
  • 451
  • 4
  • 10
4

One workaround is to make the json file a normal js file, require/import it normally, and add "allowJs" : true to "compilerOptions" in tsconfig.json.

Alex Sharp
  • 533
  • 5
  • 12
  • 5
    If you follow that path, you could also convert it to a `config.ts` file, e.g. `export const config = { ... config.json ... }`. And you don't need to set the `allowJs` option. – Erik Vullings Feb 13 '18 at 00:21
0

No, the tsc command's job is only to compile .ts files. It doesn't have the capabilities to do build-related tasks that a build system like gulp, grunt or webpack would handle.

For more information, see this similar question: Angular 2 + Typescript compiler copy html and css files

vogtb
  • 442
  • 2
  • 8
  • 4
    Should note that my answer is no longer correct. See higher upvoted one by @Arun-Reddy below. – vogtb Mar 24 '20 at 04:49