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

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

{
   "port": 5000
}

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

Ashutosh Jha

Ответов: 22

Ответы (22)

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

ng serve --port 4401    

(Вы можете изменить 4401 на любое число)

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

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

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

ng set defaults.serve.port=4201

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

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

Although there are already numerous valid solutions in the above answers, here is a visual guide and specific solution for Angular 7 projects (possibly earlier versions as well, no guarantees though) using Visual Studio Code. Locate the schema.json in the directories as shown in the image tree and alter the integer under port --> default for a permanent change of port in the browser.

enter image description here

вы также можете ввести следующую команду в своем angular cli, где вы обычно вводите npm start

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

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

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

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

Чтобы изменить порт один раз во время работы и не менять конфигурацию, вы можете использовать команду ниже

ng serve --port 5000

Если для каждого запуска ng serve вам необходимо иметь 5000 портов. Используйте методы ниже

  1. Использование angular.json

Выполните поиск "serve" в этом поле "options", как показано ниже: enter image description here

  1. В node_modules> @ angular-devkit> build-angular> src> dev-server> schema.json вы найдете ниже код и порт обновления, как хотите, например 5000. enter image description here

  2. В package.json в разделе «scripts» мы «start» обновили его с помощью приведенной ниже команды, поэтому при каждом запуске «npm start» он будет обслуживать 5000. enter image description here

Примечание: опубликуйте все, что перезапускают сервер в терминале с помощью 'ng serve' или 'npm start'. Обратная связь помогает улучшить. Спасибо!

Пару раз менялось расположение настроек порта.

При использовании 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

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

ng serve --port 4200

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

 "defaults": {
    "serve": {
      "port": 8080
    }
  }
  • Для постоянного:

    Перейти nodel_modules / angular-cli / commands / server.js Найдите var defaultPort = process.env.PORT || 4200; и замените 4200 на что угодно.

  • Для запуска:

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

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

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

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

Подробнее здесь

В angular.json:

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

Я использую angular-cli. У меня это сработало.

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

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

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

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

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

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

и порт поиска

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

изменить по умолчанию значение, как хотите, и перезапустить сервер

У нас есть два способа изменить номер порта по умолчанию в 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
    },

способы изменить номер порта в угловом проекте:

  1. node_modules \ @ angular-devkit \ build-angular \ src \ dev-server \ schema.json по этому пути
    "port": {
             "type": "number",
             "description": "Port to listen on.",
             "default": <>     /* write your required port number here */
   } 
  1. Запуск проекта с использованием
    ng serve --port <> --open
  1. В файле angular.json
   "server": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000   /* add this part */
         }
adding this part and starting the server.

вы также можете написать эту команду: ng serve -p 5000

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

Angular 9 в angular.json

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

Просто устанавливается в файле package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 3000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

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

npm start

Похоже, что в последних версиях 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
                    }
                }
            }
        }
    }
}

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

Если у вас более одной среды, вы можете добавить следующий способ в angular.json:

 "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "your_project:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "your_project:build:production"
        },
        "es5": {
          "browserTarget": "your_project:build:es5"
        },
        "local": {
          "browserTarget": "your_project:build:local",
          "port": 4201
        },
        "uat": {
          "browserTarget": "your_project:build:uat"
        }
      }
    },

Таким образом, только local указывает на другой порт.

Для угловых 10+:

  1. Перейдите к файлу angular.json.
  2. Найдите поле "serve".
  3. В разделе «serve» будет поле «options».
  4. Добавьте эту строку в «параметры»: «порт»: 4202 (любой порт, который вы хотите).

Пример:

        "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "dashboard:build",
        **"port": 4202**
      },
      "configurations": {
        "production": {
          "browserTarget": "dashboard:build:production"
        }
      }
    },

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

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

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

2022 WebDevInsider