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

Question

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

我做了什么：

1.）安装Visual Studio代码。

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下的Chrome浏览器中：PORT？

Answer 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服务的默认端口（https://angular.io/cli/serve）。 2.）我必须编译我的申请。我可以通过Visual Studio Code中的终端来实现，如下所示：或者我可以通过下面的cmd来实现： 3.）我通过以下市场安装了“Debugger for Chrome”扩展：在这3个步骤之后我添加了一些断点并可以运行（F5）我的应用程序在调试模式如下：在第二种情况下（附加）我必须做： 1.）我在launch.json中为attach模式添加了配置，如下所示：

{
    "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步！）在调试模式下一切正常。

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