Как разрешить доступ вне локального хоста

Как я могу разрешить доступ вне локального хоста на Angular2? Я могу localhost:3030/panelлегко перемещаться, но не могу ориентироваться, когда пишу свой IP, например 10.123.14.12:3030/panel/.

Не могли бы вы позволить мне, как это исправить? Я не использую npm(управление проектом узла - установка узла / запуск узла) для установки и запуска проекта.

Если хотите, я могу предоставить свои package.jsonи index.html.

Использование ng serve --host 0.0.0.0позволит вам подключиться к ng serveиспользованию вашего IP вместо localhost.

РЕДАКТИРОВАТЬ

В более новых версиях Cli вместо этого вы должны указать свой локальный IP-адрес.

РЕДАКТИРОВАТЬ 2

В более новых версиях cli (я думаю, v5 и выше) вы можете 0.0.0.0снова использовать его как ip, чтобы разместить его в сети для любого человека в вашей сети.

Пользователи Mac:

1. Перейдите в Системные настройки -> Сеть -> Wi-Fi
2. Скопируйте IP-адрес ниже статуса (обычно 192.168.1.x)
3. Вставьте это в свою нг подачу как: ng serve --host 192.168.1.x

Тогда вы сможете увидеть свою страницу на других устройствах через 192.168.1.x:4200.

Команда выполнения

ng serve --host=0.0.0.0 --disable-host-check

это отключит проверку хоста и разрешит доступ извне (вместо localhost) с IP-адресом

Вы можете использовать следующую команду для доступа к вашему ip.

ng serve --host 0.0.0.0 --disable-host-check

Если вы используете npm и хотите не запускать команду каждый раз, мы можем добавить следующую строку в файл package.json в разделе скриптов .

"scripts": {
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...
}

Затем вы можете запустить свое приложение, используя приведенную ниже команду для доступа из другой системы в той же сети.

npm start

Я просто редактирую angular.jsonфайл в моем проекте, как показано ниже, и он работает

...

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "project:build",
        "host": "0.0.0.0"
      },

...

вы также можете анализировать весь HTTP-трафик, проходящий через ваши туннели, с помощью ngrok , а затем вы можете использоватьngrok http --host-header=rewrite 4200

Откройте cmd и перейдите к местоположению проекта, т.е. где вы запускаете npm install или ng serve для проекта.

и затем выполните команду - ng serve --host 10.202.32.45где 10.202.32.45ваш IP-адрес.

Вы сможете получить доступ к своей странице, 10.202.32.45:4200где 4200 - номер вашего порта.

Примечание. Если вы обслуживаете свое приложение с помощью этой команды, вы не сможете получить доступ кlocalhost:4200

Для проблемы был Firewall. Если вы работаете в Windows, убедитесь, что узел разрешен через

Быстрое решение, которое может помочь кому-то:

Добавьте эту строку в качестве значения для начала ng serve --host 0.0.0.0 --disable-host-check в вашемpackage.json

например:

{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}

А потом просто сделать startилиnpm run start

Вы сможете получить доступ к своему проекту с других локальных IP-адресов.

Если вы столкнулись с той же проблемой внутри Docker, то вы можете использовать ниже CMDв Dockerfile.

CMD ["ng", "serve", "--host", "0.0.0.0"]

Или полный Dockerfile

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

Создайте proxy.conf.jsonи вставьте эту конфигурацию

{  
"/api/*":
    {    
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

Заменить:

let url = 'api/'+ your path;

Запустите из CLI:

ng serve  --host port.number —-proxy-config proxy.conf.json

для меня это работает с использованием "ng serve --open --host 0.0.0.0", но есть предупреждение

ВНИМАНИЕ: Это простой сервер для локального тестирования или отладки приложений Angular. Он не был проверен на предмет безопасности.

Привязка этого сервера к открытому соединению может привести к компрометации вашего приложения или компьютера. Использование хоста, отличного от того, который передан флагу "--host", может привести к проблемам с подключением к веб-сокету Возможно, вам придется использовать «--disableHostCheck», если это так.

Нет необходимости изменять package.json.

Для меня это работает с использованием:

ng serve --host = 0.0.0.0 --port = 5999 --disable-host-check

Хост: http: // localhost: 5999 /

• Использование ng serve --host<Your IP> --port<Required if any>.

• ng serve --host = 192.111.1.11 --port = 4545.

• Теперь вы можете увидеть следующую строку в конце компиляции.

Angular Live Development Server прослушивает 192.111.1.11:4545, откройте ваш браузер на http://192.111.1.11:4545/**.

Для людей, использующих менеджер проектов узлов, также будет достаточно добавить эту строку в package.json. Для пользователей угловых CLI ответ mast3rd3mon верен.

Можете добавить

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

в package.json