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

Question

I m trying to run a dev server with TypeScript and an Angular application without transpiling ts files every time  I found that I can do the running with ts-node but I want also to watch  ts files and reload the app server as I would do with something like gulp watch

User · Answer

add this to your package json file   scripts    dev    nodemon --watch       ts  --exec  ts-node  index ts      and to make this work you also need to install ts-node as dev-dependency  yarn add ts-node -D   run yarn dev to start the dev server

User · Answer

you could use ts-node-dev  It restarts target node process when any of required files changes  as standard node-dev  but shares Typescript compilation process between restarts   Install  yarn add ts-node-dev --dev   and your package json could be like this   scripts        test    echo   Error  no test specified    amp  amp  exit 1      tsc    tsc      dev    ts-node-dev --respawn --transpileOnly   src index ts      prod    tsc  amp  amp  node   build index js

User · Answer

I would prefer to not use ts-node and always run from dist folder  To do that  just setup your package json with default config        quot main quot    quot dist server js quot      quot scripts quot          quot build quot    quot tsc quot        quot prestart quot    quot npm run build quot        quot start quot    quot node   quot        quot dev quot    quot nodemon quot             and then add nodemon json config file       quot watch quot     quot src quot       quot ext quot    quot ts quot      quot ignore quot     quot src      spec ts quot       quot exec quot    quot npm restart quot     Here  i use  quot exec quot    quot npm restart quot  so all ts file will re-compile to js file and then restart the server  To run while in dev environment  npm run dev  Using this setup I will always run from the distributed files and no need for ts-node

User · Answer

EDIT  Updated for the latest version of nodemon   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  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     quot watch quot     quot src      ts quot     quot ignore quot     quot src      spec ts quot     quot exec quot    quot ts-node   index ts quot     By virtue of doing this  you ll be able to live-reload a ts-node process without having to worry about the underlying implementation  Cheers  Updated for the most recent version of nodemon  You can run this  for example  nodemon --watch  quot src    quot  --ext  quot ts json quot  --ignore  quot src      spec ts quot  --exec  quot ts-node src index ts quot   Or create a nodemon json file with the following content       quot watch quot     quot src quot       quot ext quot    quot ts json quot      quot ignore quot     quot src      spec ts quot       quot exec quot    quot ts-node   src index ts quot          or  quot npx ts-node src index ts quot     and then run nodemon with no arguments

User · Answer

Another way could be to compile the code first in watch mode with tsc -w and then use nodemon over javascript  This method is similar in speed to ts-node-dev and has the advantage of being more production-like    quot scripts quot          quot watch quot    quot tsc -w quot        quot dev quot    quot nodemon dist index js quot

User · Answer

Specifically for this issue I ve created the tsc-watch library  you can find it on npm   Obvious use case would be   tsc-watch server ts --outDir   dist --onSuccess  node   dist server js

User · Answer

Add  watch    nodemon --exec ts-node --   src index ts  to scripts section of your package json

User · Answer

If you are having issues when using  quot type quot    quot module quot  in package json  described in https   github com TypeStrong ts-node issues 1007  use the following config       quot watch quot     quot src quot       quot ext quot    quot ts json quot      quot ignore quot     quot src      spec ts quot       quot exec quot    quot node --loader ts-node esm --experimental-specifier-resolution   src index ts quot      or in the command line nodemon --watch  quot src    quot  --ext  quot ts json quot  --ignore  quot src      spec ts quot  --exec  quot node --loader ts-node esm --experimental-specifier-resolution src index ts quot

User · Answer

Here s an alternative to the HeberLZ s answer  using npm scripts   My package json      scripts          watch    nodemon -e ts -w   src -x npm run watch serve        watch serve    ts-node --inspect src index ts          -e flag sets the extenstions to look for  -w sets the watched directory  -x executes the script    --inspect in the watch serve script is actually a node js flag  it just enables debugging protocol

User · Answer

This works for me   nodemon src index ts   Apparently thanks to since this pull request  https   github com remy nodemon pull 1552

User · Answer

i did with    start    nodemon --watch  src      ts  --ignore  src      spec ts  --exec ts-node src index ts    and yarn start   ts-node not like  ts-node

User · Answer

I ve dumped nodemon and ts-node in favor of a much better alternative  ts-node-dev https   github com whitecolor ts-node-dev  Just run ts-node-dev src index ts

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

Examples related to typescript

Examples related to angular

Examples related to gulp

Examples related to development-environment

Examples related to nodemon