Question

总有一天，我正在Angular 4中创建项目，我想在新版本的Angular上再次执行此操作。

我做了什么：

1。）安装Visual Studio代码。

2。）安装Node.js：节点版本为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）上启动项目-同样的情况（错误连接）。

我错了什么？我忘记了一些东西，或者我不知道重要的事情？我在控制台/日志中没有任何警告或错误。我应该怎么做才能在Chrome浏览器中的localhost：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 serve（https://angular.io/cli/serve）的默认端口。
2.）我必须编译我的应用程序。我可以通过Visual Studio Code中的终端执行此操作，如下所示：或者我可以通过cmd如下所示： 3.）我通过以下市场安装了“ Chrome调试器”扩展：经过这3个步骤，我添加了一些断点，并可以在调试模式下运行（F5）我的应用程序，如下所示：在第二种情况下（附加），我必须这样做：
1.）我在launch.json中添加了如下附加模式的配置：

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

2。）我通过市场安装了“ 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.）在这四个步骤之后，我添加了一些断点，并可以运行（F5）我的应用程序（在此之前，您必须编译项目-第一个示例中的步骤2！）在调试模式下，一切正常。

现在，当我不得不使用角度项目时，我正在通过VSCode或cmd编译项目，我正在localhost：4200上的远程调试中启动Chrome并创建一些前端。当出现问题时，我将通过VSCode启动Attach并且可以调试。

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

1 个答案: