2

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

我做了什么：

1.) 安装 Visual Studio 代码。

2.) Nodejs的安装：Node版本是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 浏览器中？

4

1 回答 1

3

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

在第一种情况下（启动），我必须这样做：
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）我的应用程序处于调试模式在此处输入图像描述，如下所示： 在此处输入图像描述 在第二种情况下（附加）我必须做：
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 启动附加并且可以调试。

于 2019-02-15T12:35:16.260 回答