Os scripts do app/js/app.js não carregam no lite-server | TypeScript parte 2: Mais técnicas e boas práticas

Quando eu rodo o comando:

npm run server

me apresenta este erro no console do index.html:

system.js:4 GET http://localhost:3000/js/app.js.ts 404 (Not Found)
W @ system.js:4
(anonymous) @ system.js:4
(anonymous) @ system.js:4
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:4
Promise.then (async)
s @ system.js:4
i @ system.js:4
(anonymous) @ system.js:4
a @ system.js:4
(anonymous) @ system.js:4
Promise.then (async)
import @ system.js:4
(anonymous) @ system.js:4
(anonymous) @ (index):48
(index):48 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/js/app.js.ts
    Error: XHR error (404 Not Found) loading http://localhost:3000/js/app.js.ts
    Error loading http://localhost:3000/js/app.js.ts
System.import.catch.err @ (index):48
Promise.catch (async)
(anonymous) @ (index):48

package.json:

{
  "name": "alurabank",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "tsc",
    "start": "tsc -w",
    "server": "lite-server --baseDir=app"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jquery": "^3.3.6",
    "typescript": "^3.0.3",
    "lite-server": "^2.4.0"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "outDir": "app/js",
        "noEmitOnError": true,
        "noImplicitAny": true,
        "removeComments": true,
        "module": "system"
    },
    "include": [
        "app/ts/**/*"
    ]
}

e o index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagem-view"></div>

    <form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input id="data" type="date" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input id="quantidade" type="number" min="1" step="1"  class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <br>
    <br>

    <div id="negociacoes-view"></div>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/system.js"></script>
    <script>
        System.defaultJSExtensions = true;
        System.import('js/app.js').catch(err => console.error(err));
    </script>
</body>
</html>

Quando executo o npm run server recebo o seguinte erro.

system.js:4 GET http://localhost:3000/js/app.js.ts 404 (Not Found)
(index):46 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/js/app.js.ts
    Error: XHR error (404 Not Found) loading http://localhost:3000/js/app.js.ts
    Error loading http://localhost:3000/js/app.js.ts

package.json

{
  "name": "alurabank",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "tsc",
    "start": "tsc -w",
    "server": "lite-server --baseDir=app"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jquery": "^2.0.42",
    "lite-server": "^2.3.0",
    "typescript": "^2.3.2"
  }
}

Chegou a hora de transformar