Cách thay đổi cổng góc từ 4200 sang bất kỳ cổng nào khác

Tôi muốn sử dụng 5000 thay vì 4200 ..

Những gì tôi đã thử là tôi đã tạo một tệp trên tên gốc ember-clivà đặt JSON theo mã dưới đây:

{
   "port": 5000
}

Nhưng ứng dụng của tôi vẫn chạy trên 4200 thay vì 5000

Giải pháp hiệu quả với tôi là

ng serve --port 4401    

(Bạn có thể thay đổi 4401 thành bất kỳ số nào bạn muốn)

Sau đó khởi chạy trình duyệt -> http: // localhost: 4401 /

Về cơ bản, tôi đã có hai Ứng dụng và với sự trợ giúp của phương pháp trên, giờ đây tôi có thể chạy cả hai ứng dụng này trong môi trường phát triển của mình.

Bạn có thể thay đổi cổng ứng dụng của mình bằng cách nhập lệnh sau,

ng phục vụ - cổng 4200

Ngoài ra, để thiết lập vĩnh viễn, bạn có thể thay đổi cổng bằng cách chỉnh sửa tệp angular-cli.json

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

Có vẻ như mọi thứ đã thay đổi trong các phiên bản gần đây của CLI (Tôi đang sử dụng 6.0.1). Tôi đã có thể thay đổi cổng mặc định được sử dụng bằng ng servecách thêm porttùy chọn vào dự án của mình angular.json:

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

(Chỉ các thuộc tính có liên quan được hiển thị trong ví dụ này.)

Thay đổi nodel_modules/angular-cli/commands/server.jslà một ý tưởng tồi vì nó sẽ được cập nhật khi bạn cài đặt phiên bản mới angular-cli. Thay vào đó bạn nên xác định ng phục vụ --port 5000 trong package.jsonnhư thế này:

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

Bạn cũng có thể chỉ định máy chủ lưu trữ với --host 127.0.0.1

Vị trí cho các cài đặt cổng đã thay đổi một vài lần.

Nếu sử dụng CLI góc 1

Thay đổi angular-cli.json

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

Nếu sử dụng CLI góc mới nhất

Thay đổi angular.json

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

Không thay đổi bất kỳ tập tin

Chạy lệnh

ng serve --host 0.0.0.0 --port 5000

Không ai cập nhật câu trả lời cho Angular CLI mới nhất. Với mới nhất Angular CLI

Với latest versionangular-cli trong đó angular-cli.json được đổi tên thành angular.json, bạn có thể thay đổi cổng bằng cách chỉnh sửa angular.jsontệp mà bạn hiện chỉ định một cổng cho mỗi"project"

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

Tìm hiểu thêm về nó here

Tôi thường sử dụng ng setlệnh để thay đổi cài đặt Angular CLI cho cấp dự án.

ng set defaults.serve.port=4201

Nó thay đổi thay đổi của bạn .angular.cli.jsonvà thêm các cài đặt cổng như đã đề cập trước đó .

Sau thay đổi này, bạn có thể sử dụng một cách đơn giản ng servevà nó sẽ sử dụng cổng ưa thích mà không cần chỉ định nó mỗi lần.

bạn cũng có thể nhập lệnh dưới đây trong cli góc của bạn, nơi bạn thường nhập npm start

ng phục vụ --host "địa chỉ ip" - cổng "số cổng"

bạn cũng có thể viết lệnh này: ng serve -p 5000

goto tập tin này

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

và cổng tìm kiếm

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

thay đổi giá trị mặc định bất cứ điều gì bạn muốn và khởi động lại máy chủ

• Đối với vĩnh viễn:

  Goto gậtel_modules / angular-cli / Command / server.js Tìm kiếm var defaultPort = process.env.PORT || 4200; và thay đổi 4200 thành bất cứ điều gì bạn muốn.

• Để chạy ngay bây giờ:

  ng phục vụ - cổng 4500 (Bạn thay đổi 4500 thành bất kỳ số nào bạn muốn sử dụng làm cổng của mình)

Không nên thay đổi trong các mô-đun nút vì các bản cập nhật hoặc cài đặt lại có thể loại bỏ những thay đổi đó. Vì vậy, tốt hơn để thay đổi trong cli góc

Góc 9 trong angular.json

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

Bạn có thể chỉnh sửa số cổng mặc định được định cấu hình trong tệp phục vụ.

Con đường sẽ có project_direcory/node_modules/angular-cli/commands/serve.js.

Tìm kiếm dòng này -> var defaultPort = process.env.PORT || 4200;
Thay thế bằng dòng này ->var defaultPort = process.env.PORT || 5000;

chỉ cần chạy ng serve --port 5000 --open

Chạy bên dưới lệnh cho hơn 4200

ng serve --port 4500

Trong angular.json:

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

Tôi đang sử dụng angular-cli. Điều này làm việc cho tôi.

trong góc 2 ++.

Để thay đổi cổng, bạn có thể chạy lệnh bên dưới trong terminal:

ng serve --host 0.0.0.0 --port 5000.

Mặc dù đã có nhiều giải pháp hợp lệ trong các câu trả lời ở trên, đây là hướng dẫn trực quan và giải pháp cụ thể cho các dự án Angular 7 (cũng có thể là các phiên bản trước đó, không có gì đảm bảo) sử dụng Visual Studio Code. Định vị lược đồ.json trong các thư mục như được hiển thị trong cây hình ảnh và thay đổi số nguyên dưới cổng -> mặc định cho một thay đổi vĩnh viễn của cổng trong trình duyệt.

Đi đến angular.jsontập tin

Tìm kiếm từ khóa "phục vụ":

Thêm porttừ khóa như hình dưới đây:

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

Chúng tôi có hai cách để thay đổi số cổng mặc định trong Angular.

Cách đầu tiên để cli lệnh:

ng serve --port 2400 --open

Cách thứ hai là theo cấu hình tại vị trí: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json .

Thay đổi trong schema.jsontập tin.

{
 "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
    },

Chỉ cần chạy

ng phục vụ - cổng yourport

Thí dụ:

ng serve --port 4401

Mã làm việc cho tôi như sau

ng serve --port ABCD

Ví dụ

ng serve --port 6300

Để chạy và mở trong trình duyệt, tự động sử dụng cờ -openhoặc chỉ-o

ng serve -o --port 4200

Lưu ý: Cổng 4200 là tùy ý. Nó có thể là bất kỳ cổng nào bạn chọn

Nếu bạn muốn sử dụng biến môi trường NodeJS để thiết lập giá trị của cổng máy chủ dev Angular CLI, có thể sử dụng phương pháp sau:

• tạo tập lệnh NodeJS, sẽ có quyền truy cập vào biến môi trường (giả sử DEV_SERVER_PORT) và có thể chạy ng servevới --portgiá trị tham số được lấy từ biến đó ( child_ process có thể là bạn của chúng ta ở đây):

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()));

• cập nhật gói.json để cung cấp tập lệnh này chạy qua npm
• đừng quên thiết lập DEV_SERVER_PORTbiến môi trường (có thể được thực hiện thông qua dotenv )

Đây cũng là mô tả đầy đủ về phương pháp này: Cách thay đổi Cổng máy chủ phát triển CLI góc thông qua .env .

Điều này cũng sẽ tự động mở cửa sổ của bạn

ng serve -o --port 4801