启动角度项目时错误连接被拒绝答案

【问题标题】：Error connection refused while starting angular project启动角度项目时错误连接被拒绝
【发布时间】：2019-07-06 03:23:42
【问题描述】：

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

我做了什么：

1.) 安装 Visual Studio Code。

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

3.) 通过“npm install -g @angular/cli”推荐安装 Angular CLI。

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

5.) Chrome 调试器的安装。

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

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

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

我做错了什么？我忘记了什么或者我不知道什么重要的事情？我在控制台/日志中没有任何警告或错误。我应该怎么做，让我的项目在 localhost:PORT 下的 Chrome 浏览器中？

【问题讨论】：

我认为您在 4200 上为您的项目提供服务，并且您也在为调试器使用相同的端口，因此连接被拒绝
但我尝试在 launch.json 中将端口从 4200 更改为不同的端口，但没有帮助。
尝试使用 ng serve --port 5200
就像我说的，我试过了，但我想使用 chrome 调试器。

标签： angular visual-studio-code chrome-debugging

【解决方案1】：

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

在第一种情况下（启动），我必须这样做：
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 Code 中的终端来完成，如下所示：或者我可以通过 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“目标”的路径：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
4.) 我启动了在“目标”路径中进行远程调试的 Chrome。
小心！
如果任务栏上有 Chrome 图标，则必须新添加远程调试！（我知道这很愚蠢）。
5.) 在这 4 个步骤之后，我添加了一些断点并可以运行 (F5) 我的应用程序（在此之前，您必须编译项目 - 第一个示例中的第 2 步！）在调试模式下，一切正常。

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

【讨论】：