Ошибка соединения при запуске углового проекта

Question

Однажды я создавал проекты в Angular 4, и я хочу сделать это снова, но на более новой версии Angular.

Что я сделал:

1.) Установка кода Visual Studio.

2.) Установка Nodejs: версия узла - 10.15.1. Версия Npm - 6.4.1.

3.) Установка Angular CLI с помощью команды npm install -g @ angular / cli.

4.) Я создал новый проект с помощью cmd и собрал его с помощью ng serve.Ведь я запускаю его по localhost: 4200 в своем браузере - все было отлично.

5.) Установка отладчика для Chrome.

6.) Изменение порта по умолчанию с 8080 на 4200.

7.) Запуск проекта, и я получаю ERR_CONNECTION_REFUSED.

Я попытался также запустить проект на порту по умолчанию (4200) - такая же ситуация (ошибка соединения).

Чтоя не прав?Я забыл о чем-то или я не знаю что-то важное?У меня нет никаких предупреждений или ошибок в консоли / журналах.Что мне нужно сделать, чтобы мой проект в браузере Chrome находился под localhost: PORT?

Answer 1

Я решил эту проблему.Я могу работать с моим приложением в двух режимах Launch или Attach.В первом случае ( launch ) мне нужно было сделать: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, как показано ниже: , или я могу сделать это с помощью cmd, как показано ниже: 3.) Я установил «Отладчик для 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.) Я установил расширение «Отладчик для Chrome» через Marketplace.3.) Я установил удаленную отладку ("--remote-debugging-port = 9222") для приложения Chrome, как показано ниже: Подробности:Путь для моей Chrome "target":"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --remote-debugging-port = 92224.) Я запустил тот Chrome, у которого была удаленная отладка по пути «target».Быть осторожен!Если у вас есть значок Chrome на панели задач, вы должны добавить удаленную отладку заново (я знаю, это глупо).5.) После этих 4 шагов я добавил некоторую точку останова и смог запустить (F5) мое приложение (перед этим вы должны скомпилировать проект - шаг 2 в первом примере!) в режиме отладки и всеработает.

Теперь, когда мне нужно работать с угловым проектом, я компилирую проект через VSCode или cmd, я запускаю Chrome в удаленной отладке на localhost: 4200 и создаю некоторый интерфейс.Когда что-то не так, я запускаю присоединение через VSCode и могу отлаживать.