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

Posted 2023-02-22

【中文标题】启动角度项目时错误连接被拒绝

【英文标题】：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 调试器。

【参考方案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 启动附加，我可以调试。