각도 포트를 4200에서 다른 포트로 변경하는 방법

4200 대신 5000을 사용하고 싶습니다 ..

내가 시도한 것은 루트 이름으로 파일을 만들고 ember-cli아래 코드에 따라 JSON을 넣는 것입니다.

{
   "port": 5000
}

하지만 내 앱은 여전히 ​​5000 대신 4200에서 실행됩니다.

나를 위해 일한 해결책은

ng serve --port 4401    

(4401을 원하는 숫자로 변경할 수 있습니다)

그런 다음 브라우저를 시작하십시오-> http : // localhost : 4401 /

기본적으로 두 개의 응용 프로그램이 있었고 위의 접근 방식을 통해 개발 환경에서 두 응용 프로그램을 동시에 실행할 수 있습니다.

다음 명령을 입력하여 응용 프로그램 포트를 변경할 수 있습니다.

ng serve --port 4200

또한 영구 설치를 위해 angular-cli.json 파일을 편집하여 포트를 변경할 수 있습니다

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

최신 버전의 CLI에서 변경 된 것 같습니다 (사용하고 있습니다 6.0.1). 내 프로젝트에 옵션을 ng serve추가하여 사용되는 기본 포트를 변경할 수있었습니다 .portangular.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. 대신 다음 과 같이 ng serve --port 5000 을 지정해야 package.json합니다.

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

--host 127.0.0.1로 호스트를 지정할 수도 있습니다.

포트 설정 위치가 두 번 변경되었습니다.

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

아무도 최신 Angular CLI에 대한 답변을 업데이트하지 않았습니다. Angular CLI

으로 latest version각-cli.json가로 이름이 변경되는 각도-CLI의 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 "port-number"

이 명령을 작성할 수도 있습니다. 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 / 각-CLI / 명령 / server.js 검색 VAR defaultPort = process.env.PORT || 4200; 4200을 원하는 다른 것으로 변경하십시오.

• 지금 실행하려면 :

  ng serve --port 4500 (포트로 사용하려는 숫자로 4500 변경)

업데이트 또는 재설치로 인해 변경 사항이 제거 될 수 있으므로 노드 모듈을 변경하지 않는 것이 좋습니다. 각도 클리닉에서 변경하는 것이 좋습니다.

angular.json의 각도 9

{
    "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.

위의 답변에는 이미 많은 유효한 솔루션이 있지만 Visual Studio Code를 사용 하는 Angular 7 프로젝트 (이전 버전도 가능하지만 보장되지는 않음 )에 대한 시각적 가이드 및 특정 솔루션이 있습니다. 이미지 트리에 표시된대로 디렉토리에서 schema.json 을 찾아 브라우저에서 포트를 영구적으로 변경 하려면 port- > default 에서 정수를 변경하십시오 .

angular.json파일로 이동

키워드 "serve"검색 :

port아래와 같이 키워드를 추가하십시오 .

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

Angular에서 기본 포트 번호를 변경하는 두 가지 방법이 있습니다.

cli command의 첫 번째 방법 :

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 dev 서버의 포트 값을 설정하려는 경우 다음 방법이 가능합니다.

• 환경 변수에 액세스 할 수 있습니다 (예를 들어, 어떤 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()));

• npm을 통해이 스크립트를 실행하도록 package.json을 업데이트하십시오.
• DEV_SERVER_PORT환경 변수 를 설정하는 것을 잊지 마십시오 ( dotenv 를 통해 수행 가능 )

다음은이 접근 방식에 대한 전체 설명입니다 . .env를 통해 Angular CLI 개발 서버 포트를 변경하는 방법

그러면 자동으로 창이 열립니다

ng serve -o --port 4801