Як змінити кутовий порт з 4200 на будь-який інший

Я хочу використовувати 5000 замість 4200 ..

Що я спробував - це створити файл з ім'ям кореня ember-cliта поставити JSON відповідно до коду нижче:

{
   "port": 5000
}

Але мій додаток все ще працює на 4200 замість 5000

Рішення, що працювало для мене, було

ng serve --port 4401    

(Ви можете змінити 4401 на будь-яке число, яке вам потрібно)

Потім запустіть браузер -> http: // localhost: 4401 /

В основному, у мене було два додатки, і за допомогою вищезазначеного підходу я можу одночасно запускати обидва в моєму середовищі розробки.

Ви можете змінити порт програми, ввівши таку команду,

служити --порт 4200

Також для постійної установки ви можете змінити порт, відредагувавши файл angular-cli.json

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

Здається, все змінилося в останніх версіях 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
                    }
                }
            }
        }
    }
}

(У цьому прикладі показані лише відповідні властивості.)

Зміна nodel_modules/angular-cli/commands/server.js- це погана ідея, оскільки вона буде оновлюватися при встановленні нової версії angular-cli. Замість цього ви повинні вказати нг служити --port 5000 в , package.jsonяк це:

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

Ви також можете вказати хост за допомогою --host 127.0.0.1

Місце для налаштувань портів змінилося кілька разів.

Якщо використовується кутова CLI 1

Зміна angular-cli.json

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

Якщо використовується останній кутовий 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

Ніхто не оновлював відповідь на найновіший кутовий 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

Зазвичай я використовую ng setкоманду для зміни налаштувань Angular CLI для рівня проекту.

ng set defaults.serve.port=4201

Це змінює зміни вашого .angular.cli.jsonі додає параметри порту, як згадувалося раніше .

Після цієї зміни ви можете використовувати просто, ng serveі він буде використовувати вподобаний порт без необхідності вказувати його кожен раз.

Ви також можете ввести команду нижче у свій кутовий кліп, де Ви зазвичай вводите npm start

ng serve --host "ip-address" --port "номер порту"

Ви також можете написати цю команду: ng serve -p 5000

перейти до цього файлу

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

і порт пошуку

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

змінити значення за замовчуванням, що вам потрібно, і перезапустити сервер

• Для постійних:

  Перейти nodel_modules / angular-cli / command / server.js Пошук var defaultPort = process.env.PORT || 4200; і змінити 4200 на все, що завгодно.

• Щоб запустити зараз:

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

Не рекомендується змінювати модулі вузлів, оскільки оновлення або повторна інсталяція можуть видалити ці зміни. Тож краще поміняти кутовий кліп

Кутовий 9 в angular.json

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

Ви можете змінити номер порту за замовчуванням, який налаштовано у файлі serve.js.

Шлях буде project_direcory/node_modules/angular-cli/commands/serve.js.

Шукайте цей рядок -> var defaultPort = process.env.PORT || 4200;
Замініть цей рядок ->var defaultPort = process.env.PORT || 5000;

просто біжи ng serve --port 5000 --open

Виконайте команду нижче, ніж 4200

ng serve --port 4500

У angular.json:

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

Я використовую angular-cli. Це працювало для мене.

в кутовій 2 ++.

Для зміни порту ви можете запустити команду нижче в терміналі:

ng serve --host 0.0.0.0 --port 5000.

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

Перейдіть до angular.jsonфайлу,

Пошук за ключовим словом "служити":

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

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

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

Просто біжи

ng serve --портуйте свій порт

Приклад:

ng serve --port 4401

Код працював для мене таким

ng serve --port ABCD

Наприклад

ng serve --port 6300

Для запуску та відкриття в браузері автоматично використовуйте прапор -openабо просто-o

ng serve -o --port 4200

Примітка: Порт 4200 є довільним. Це може бути будь-який порт на ваш вибір

Якщо ви хочете використовувати змінну середовища 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 Server Server через .env .

Це автоматично відкриє і ваше вікно

ng serve -o --port 4801