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

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

Что я сделал:

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

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

3.) Установка Angular CLI командой "npm install -g @ angular / cli" commend.

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

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

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

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

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

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


visual-studio-code angular chrome-debugging
person Robert Daraż    schedule 12.02.2019    source источник
comment
Я думаю, что вы обслуживаете свой проект на 4200, и вы также используете тот же порт для отладчика, и, следовательно, в соединении отказано   -  person dileepkumar jami    schedule 12.02.2019
comment
Но я попытался изменить порт с 4200 на другой в launch.json, и это не помогло.   -  person Robert Daraż    schedule 12.02.2019
comment
Попробуйте использовать ng serve --port 5200   -  person Aarsh    schedule 12.02.2019
comment
Как я уже сказал, я пробовал и работал, но хочу использовать хромированный отладчик.   -  person Robert Daraż    schedule 12.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я решил эту проблему.
Я могу работать со своим приложением в двух режимах: "Запуск" или "Присоединение".

В первом случае (запуск) мне пришлось сделать: < br /> 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» через торговую площадку, как показано ниже: введите описание изображения здесь После этих трех шагов я добавил точку останова и смог запустить (F5) свое приложение в режиме отладки введите описание изображения здесь , как показано ниже: введите описание изображения здесь Во втором случае (прикрепить) мне пришлось сделать:
1.) Я добавил конфигурацию в launch.json для режима подключения, как показано ниже:

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

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

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

person Robert Daraż    schedule 15.02.2019