typescriptdevelopment-environmentnodemon

How to watch and reload ts-node when TypeScript files change

I'm trying to run a dev server with TypeScript and an Angular application without transpiling ts files every time.

What I found is that I can run .ts files with ts-node but I want also to watch .ts files and reload my app/server. An example of this is the command gulp watch.

Solution

  • You can now simply npm install --save-dev ts-node nodemon and then run nodemon with a .ts file and it will Just Work:

    nodemon app.ts

    Previous versions:

    I was struggling with the same thing for my development environment until I noticed that nodemon's API allows us to change its default behaviour in order to execute a custom command.

    For example, for the most recent version of nodemon:

    nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "ts-node src/index.ts"

    Or create a nodemon.json file with the following content:

    {
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/index.ts"      // or "npx ts-node src/index.ts"
}

    and then run nodemon with no arguments.

    By virtue of doing this, you'll be able to live-reload a ts-node process without having to worry about the underlying implementation.

    And with even older versions of nodemon:

    nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/index.ts

    Or even better: externalize nodemon's config to a nodemon.json file with the following content, and then just run nodemon, as Sandokan suggested:

    {
  "watch": ["src/**/*.ts"],
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./index.ts"
}