express server 無法連線

[leadingtw273]

目的

我最近參考

[線上讀書會] 默司 主講 vs code editor 實用入門 part2

來學習 VScode 的相關用法，從一開始4:00基本設置到24:53的網頁顯示，過程都有照默司大大的方式去下code，想要默司大大的方式去建置一個初始頁面。

使用的工具

系統: win10
IDE: VScode 1.22.2
node 8.9.3
npm 5.6.0
express 4.16.3
terminal cmder

操作流程

package.json如下

{
  "name": "ts_test01",
  "version": "1.0.0",
  "description": "",
  "main": "dist/main.js",
  "scripts": {
    "start": "node ./dist/main.js",
    "build": "tsc",
    "nodemon": "nodemon",
    "serve": "tsc -w & nodemon"
  },
  "keywords": [],
  "author": "leadingtw<[email protected]>",
  "license": "ISC",
  "private": true,
  "dependencies": {
    "body-parser": "^1.18.2",
    "cookie-parser": "^1.4.3",
    "express": "^4.16.3"
  },
  "devDependencies": {
    "@types/body-parser": "^1.16.8",
    "@types/cookie-parser": "^1.4.1",
    "@types/express": "^4.11.1",
    "@types/node": "^9.6.5",
    "nodemon": "^1.17.3",
    "typescript": "^2.8.1"
  }
}

指令 =>
npm run build
npm start

遇到的問題

terminal 上有正確顯示

==========================
Server is listen : 3000
==========================

只是在網頁上輸入[127.0.0.1:3000]或是[localhost:3000]
他都一直跑圈圈
後面直接顯示[無法連上這個網站]
按F12也沒有資訊
terminal 上除了顯示上面那一段之後完全沒動靜
也可以正常[^c]退出

嘗試過的解法

cmder換成win10內建cmd或是用管理員開啟狀況也是一樣
換成筆電開也不行
重開一個檔案照著express官網上做就能夠連線
或是開我之前沒用TypeScript建的express專案也能開啟
換瀏覽器也不行
功力還沒到不知道還能用那些方式測試除錯
VScode的Debugging也還不太會用
這種情況也不知道要下哪寫關鍵字去stackoverflow查詢
查也查不到相似的問題......
希望各位大神能給小弟我一點方向或是關鍵字 感謝~~
現在我剩下唯一的思考方向就是影片的版本過舊導致我無法正常運作 囧RZ

程式碼

/src/app.ts

import express = require("express");
import body = require("body-parser");
import cookie = require("cookie-parser");

let app = express();

app.use(cookie());
app.use(body.json);
app.use(body.urlencoded({ extended: false }));

app.get('/', (req, res) => {
    res.send('welcome');
});

export default app;

/src/main.ts

import http = require('http');
import app from './app';

let server = http.createServer(app);
let port = process.env.PORT || '3000';

server.on('error', (error) => {
    console.log(error);
})

server.listen(port, () => {
    console.log('==========================');
    console.log(`Server is listen : ${port}`);
    console.log('==========================');
});

/tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "rootDir": "src",
        "outDir": "dist"
    },
    "exclude": [
        "node_modules"
    ]
}

/.vscode/tasks.json

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "args": [
                "run", "build"
            ]
        },
        {
            "taskName": "serve",
            "args": [
                "run", "serve"
            ]
        }
    ]
}

terminal 顯示

> [email protected] start C:\Users\leadi\Documents\Gitub\TestAndLearnSpace\ts_test01
> node ./dist/main.js

==========================
Server is listen : 3000
==========================

[wiasliaw]

app.use(body.json());

目前看到這行有錯