启动 angular 项目时错误连接被拒绝

Question

某天我在 Angular 4 中创建项目，我想再做一次，但是在更新版本的 Angular 上。

我做了什么：

1.) 安装 Visual Studio 代码。

2.) Nodejs的安装：节点版本为 10.15.1 Npm 版本是 6.4.1

3.) 通过 "npm install -g @angular/cli" commend 安装 Angular CLI。

4.) 我用cmd创建了新项目，用ng serve构建了他。毕竟我在浏览器中通过 localhost:4200 启动了他 - 一切都很好。

5.) 安装 Chrome.

的调试器

6.) 将默认端口从 8080 更改为 4200。

7.) 启动项目，我得到 ERR_CONNECTION_REFUSED.

我也试过在默认端口 (4200) 上启动项目 - 同样的情况（错误连接）。

我做错了什么？我忘记了什么或者我不知道什么重要的事情？ console/logs 中没有任何警告或错误。我应该怎么做，才能在 localhost:PORT 下的 Chrome 浏览器中显示我的项目？

Answer 1

我解决了这个问题。
我可以在启动或附加两种模式下使用我的应用程序。

在第一种情况下 (launch) 我必须这样做：
1.) 我在 launch.json 中为启动模式添加了配置，如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

详情：
最重要的是在 url 中设置好端口。我必须设置 4200 端口，因为它是 ng serve (https://angular.io/cli/serve) 的默认端口。
2.) 我必须编译我的应用程序。我可以通过 Visual Studio 中的终端来完成，代码如下：或者我可以像下面这样通过 cmd 来完成： 3.) 我通过市场安装了 "Debugger for Chrome" 扩展，如下所示：在这 3 个步骤之后，我添加了一些断点，并且可以运行 (F5) 我的应用程序处于调试模式，如下所示：在第二种情况下 (attach) 我必须这样做：
1.) 我在 launch.json 中为附加模式添加了配置，如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}",
        }
    ]
}

2.) 我通过市场安装了 "Debugger for Chrome" 扩展。
3.) 我为 Chrome 应用程序设置了远程调试（“--remote-debugging-port=9222”），如下所示：详情：
我的 Chrome "target" 的路径：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
4.) 我启动了 Chrome，它在 "target".
的路径中进行了远程调试小心！
如果你的任务栏上有Chrome图标，你必须新添加远程调试！（我知道这是愚蠢的）。
5.) 在这 4 个步骤之后，我添加了一些断点并且可以运行 (F5) 我的应用程序（在它之前，你必须编译项目 - 第一个示例中的步骤 2！）在调试模式和一切有效。

现在，当我必须使用 angular 项目时，我正在通过 VSCode 或 cmd 编译项目，我开始 Chrome 在 localhost:4200 上进行远程调试并创建一些前端。当出现问题时，我通过 VSCode 启动附加，我可以调试。

启动 angular 项目时错误连接被拒绝

Error connection refused while starting angular project

angular

visual-studio-code

chrome-debugging