nodemon not refreshing when using typescript

Question

I'm working on an app with NodeJs, express, typescript and nodemon.

But the page is not refreshed when I changed some code in the ts files.

How can I do to compile the ts file in js and refresh the browser with nodemon (or other tool)?

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "debug": "^2.6.8",
    "dotenv": "^2.0.0",
    "express": "^4.15.3",
    "iconv-lite": "^0.4.17",
    "inversify": "^4.11.1",
    "jsonwebtoken": "^7.4.1",
    "mongoose": "^5.0.10",
    "morgan": "^1.8.2",
    "passport": "^0.3.2",
    "passport-jwt": "^2.2.1",
    "rxjs": "^5.4.2",
    "typescript": "^2.7.2",
    "winston": "^2.3.1"
  },
  "devDependencies": {
    "@types/chai": "^4.0.0",
    "@types/debug": "0.0.29",
    "@types/dotenv": "^2.0.20",
    "@types/express": "^4.0.35",
    "@types/mocha": "^2.2.41",
    "@types/mongoose": "^4.7.15",
    "@types/morgan": "^1.7.32",
    "@types/node": "^6.0.77",
    "@types/passport": "^0.3.3",
    "@types/passport-jwt": "^2.0.20",
    "chai": "^4.0.2",
    "chai-http": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-typescript": "^3.1.7",
    "gulp-yaml": "^1.0.1",
    "mocha": "^3.4.2",
    "mocha-typescript": "^1.1.4"
  },
  "scripts": {
    "start": "gulp build && nodemon dist/index.js",
    "build": "gulp build",
    "test": "gulp build && mocha -t 30000 dist/**/*.test.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/devslaw/TypeScript-Node.js-REST-example.git"
  },
  "keywords": [],
  "author": "Arthur Arakelyan <[email protected]>",
  "license": "ISC",
  "homepage": "https://github.com/devslaw/TypeScript-Node.js-REST-example#readme"
}

So know, anytime i make a change, I need to stop the server and run npm start again

Answer 1

The problem lies in the fact that your start script is watching dist/index.js. This folder only changes when the code gets recompiled into plain JavaScript. So you will need to watch the TypeScript files instead. The great thing is that you can change nodemon's default behavior. You will need to add ts-node to your package.json as well.

Try setting the script to something like the following:

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

You will then want to set up a nodemon.json file with the following also:

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