Как изменить угловой порт с 4200 на любой другой


257

Я хочу использовать 5000 вместо 4200 ..

Я попробовал создать файл с именем root ember-cliи поместить JSON в соответствии с приведенным ниже кодом:

{
   "port": 5000
}

Но мое приложение все еще работает на 4200 вместо 5000



Вы также перезагрузили сервер?
Крис

да @kristjanreinhold
Ашутош Джа

Отвечает ли это на ваш вопрос? сервер angular-cli - как указать порт по умолчанию
elwyn

Ответы:


429

Решение сработало для меня было

ng serve --port 4401    

(Вы можете изменить 4401 на любой номер, который вы хотите)

Затем запустите браузер -> http: // localhost: 4401 /

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


Опция '--port 4201' не зарегистрирована командой подачи
holms

6
sidenote для других: не делайте, npm start --port 4401потому npm startчто, кажется, не выполняет
--port

1
Пожалуйста, посмотрите этот ответ, а также stackoverflow.com/a/52345586/3209545
callee.args

просто дополнение, вы можете одновременно открыть обслуживаемое приложение в новой вкладке браузера, добавив ng serve --port 4401 --open
briancollins081

115

Вы можете изменить порт приложения, введя следующую команду:

нг служить --порт 4200

Также для постоянной настройки вы можете изменить порт, отредактировав файл angular-cli.json

 "defaults": {
    "serve": {
      "port": 8080
    }
  }

2
В более новых версиях вы должны использовать ng serve --port 8080 (без «:», вместо этого пробел).
Джулиан Л.

Если это последний параметр «по умолчанию», вы должны избавиться от запятой
Освальдо Салазар

1
Это изменилось в последних версиях CLI - см. Мой ответ для более подробной информации.
Натан Друг

98

Кажется, все изменилось в последних версиях CLI (я использую 6.0.1). Я смог изменить используемый по умолчанию порт ng serve, добавив portопцию в мой проект angular.json:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "projects": {
        "my-project": {
            "architect": {
                "serve": {
                    "options": {
                        "port": 4201
                    }
                }
            }
        }
    }
}

(В этом примере показаны только соответствующие свойства.)


И я тоже хочу сменить хозяина
Кунвар Сингх,

это действительно правильный постоянный ответ
WtFudgE

59

Изменение nodel_modules/angular-cli/commands/server.js- плохая идея, так как она будет обновляться при установке новой версии angular-cli. Вместо этого вы должны указать нг служить --port 5000 в , package.jsonкак это:

"scripts": {
    "start": "ng serve --port 5000"
}

Вы также можете указать хост с --host 127.0.0.1


Как вы запускаете приложение? ng serve? Кажется, не работает, когда я проверяю в браузере,localhost:5000
Ашиш Ранджан

1
Я думаю, что это должен быть принятый ответ. Почти для людей, использующих npm startв качестве команды
blobmaster

Зачем использовать параметр сценария для постоянной настройки? Для этого есть файл, и этоangular.json
Мозгор

59

Расположение параметров порта изменилось пару раз.

При использовании Angular CLI 1

+ Изменить angular-cli.json

{
  "defaults": {
    "serve": {
      "host": "0.0.0.0",
      "port": 5000 
    }
  }
}

Если используется последняя версия Angular CLI

+ Изменить angular.json

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "0.0.0.0",
                  "port": 5000
                }
            }
        }
        ...
    }
}

Без изменения какого-либо файла

Запустите команду

ng serve --host 0.0.0.0 --port 5000

8
Это следует рассматривать как правильный ответ, поскольку он охватывает обе возможности: постоянные или временные решения.
Даниэль Сантана

1
Я согласен с @Dan
marknt15

В случае постоянных изменений, знаете ли вы, следует ли указывать новый порт в другом месте этого файла `angular.json`? Мой serveуровень опций содержит два элемента с browserTarget, optionsи configurations/production. Должен ли я добавить эту новую portзапись в обоих из них или только optionsодин?
Мозгор

19

Никто не обновил ответ для последней версии Angular CLI. Angular CLI

С помощью latest versionangular-cli, в который angular-cli.json переименован angular.json, вы можете изменить порт, отредактировав angular.jsonфайл, который вы сейчас указываете для порта."project"

projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4500
                }
            }
        }
    }
}

Подробнее об этом here


А как насчет записи `serve / configurations / production`, которая также содержит browserTargetзапись, так же, как и serve / optionsгде мы добавляем новую port?
Мозгор

1
Лучший ответ для последней версии Angular CLI
Dacomis

14

Я обычно использую ng setкоманду, чтобы изменить настройки Angular CLI для уровня проекта.

ng set defaults.serve.port=4201

Он меняет ваше имя .angular.cli.jsonи добавляет настройки порта, как уже упоминалось ранее .

После этого изменения вы можете просто использовать ng serveего, и он будет использовать предпочтительный порт без необходимости каждый раз указывать его.


get / set устарела в пользу конфигурации в 6.0, так что это больше не работает.
ВанАльберт

10

Вы также можете ввести нижеприведенную команду в свой угловой код, где вы обычно вводите npm start

ng serve --host "ip-адрес" --port "номер порта"



6

перейти к этому файлу

node_modules\@angular-devkit\build-angular\src\dev-server\schema.json

и порт поиска

"port": {
  "type": "number",
  "description": "Port to listen on.",
  "default": 4200
},

измените значение по умолчанию на любое другое и перезапустите сервер


Работает у меня, просто нужно заметить, чтобы поменять упомянутый файл, а не другой - node_modules/@angular/cli/lib/config/schema.json который содержит такое же свойство.
lingar

5
  • Для постоянного:

    Перейти к nodel_modules / angular-cli / commands / server.js Искать var defaultPort = process.env.PORT || 4200; и измените 4200 на что-нибудь еще, что вы хотите.

  • Чтобы запустить сейчас:

    ng serve --port 4500 (вы заменяете 4500 на любой номер, который хотите использовать в качестве порта)


1
Я не думаю, что изменение содержимого пакета, установленного локально, node_modulesявляется хорошей практикой.
Бруно Брант

5

Не рекомендуется вносить изменения в модули узла, так как обновления или переустановка могут удалить эти изменения. Так что лучше поменять в угловых кли

Угловой 9 в angular.json

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}  

4

Вы можете изменить номер порта по умолчанию, настроенный в файле serve.js.

Путь будет project_direcory/node_modules/angular-cli/commands/serve.js.

Поиск этой строки -> var defaultPort = process.env.PORT || 4200;
Заменить на эту строку ->var defaultPort = process.env.PORT || 5000;


4
Если вы читаете это и подумываете об этом ... пожалуйста, никогда не редактируйте файлы зависимостей.
emix



4

В angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000
         }

Я использую Angular-Cli. Это сработало для меня.


4

в угловых 2 ++.

Для изменения порта вы можете запустить в терминале следующую команду:

ng serve --host 0.0.0.0 --port 5000.

2

Хотя в приведенных выше ответах уже есть множество действительных решений, здесь приведено наглядное руководство и конкретное решение для проектов Angular 7 (возможно, и более ранних версий, но без гарантий) с использованием кода Visual Studio. Найдите schema.json в каталогах, как показано в дереве изображений, и измените целое число в разделе порт -> по умолчанию для постоянного изменения порта в браузере.

введите описание изображения здесь


@ s34N Рад это слышать. Если ответ был полезным, пожалуйста, не забудьте дать голосование на пост, если это еще не сделано. Спасибо друг.
themightyhulk

2

Перейти к angular.jsonфайлу,

Поиск по ключевому слову "serve":

Добавьте portключевое слово, как показано ниже:

 "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
         "browserTarget": "my-new-angular-app:build",
         "port": 3001
     },
     ...

1

У нас есть два способа изменить номер порта по умолчанию в Angular.

Первый способ команды cli:

ng serve --port 2400 --open

Второй способ заключается в конфигурации на месте: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Внесите изменения в schema.jsonфайл.

{
 "title": "Dev Server Target",
  "description": "Dev Server target options for Build Facade.",
  "type": "object",
  "properties": {
    "browserTarget": {
      "type": "string",
      "description": "Target to serve."
    },
    "port": {
      "type": "number",
      "description": "Port to listen on.",
      "default": 2400
    },

Не рекомендуется изменять файлы в node_modules, которые могут быть перезаписаны после переустановки пакета. Очень хорошее решение было представлено Sajeetharan.
Даниэль Сантана

1

Просто беги

нг служить --порт --порт ваш порт

Пример:

ng serve --port 4401



0

Для запуска и открытия в браузере автоматически используйте флаг -openили просто-o

ng serve -o --port 4200

Примечание: порт 4200 является произвольным. Это может быть любой порт на ваш выбор


0

Если вы хотите использовать переменную среды NodeJS для установки значения порта сервера разработки Angular CLI, возможен следующий подход:

  • создайте сценарий NodeJS, который будет иметь доступ к переменной окружения (скажем, DEV_SERVER_PORT) и может выполняться ng serveсо --portзначением параметра, взятым из этой переменной ( child_process может быть нашим другом здесь):
const child_process = require('child_process');
const child = child_process.exec(`ng serve --port=${process.env.DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));
  • Обновите package.json, чтобы этот скрипт работал через npm.
  • не забудьте установить DEV_SERVER_PORTпеременную окружения (можно сделать через dotenv )

Вот также полное описание этого подхода: Как изменить порт Angular CLI Development Server через .env .


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.