máy chủ angular-cli - cách chỉ định cổng mặc định

130

Sử dụng angular-cli với ng servelệnh, làm cách nào tôi có thể chỉ định một cổng mặc định để tôi không cần phải truyền --portcờ theo cách thủ công mỗi lần?

Tôi muốn thay đổi từ cổng mặc định 4200.

angular angular-cli

— elwyn
nguồn

225

Cập nhật cho @ angular / cli @ 9.x: và hơn

Trong angular.jsonbạn có thể chỉ định một cổng cho mỗi "dự án"

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

Tất cả các tùy chọn có sẵn:

https://angular.io/guide/workspace-config#project-tool-configuration-options

Ngoài ra, bạn có thể chỉ định cổng mỗi lần khi chạy ng phục vụ như thế này:

ng serve --port 1337

Với cách tiếp cận này, bạn có thể muốn đưa tập lệnh này vào tập lệnh trong gói.json để giúp chạy dễ dàng hơn mỗi lần / chia sẻ cấu hình với những người khác trong nhóm của bạn:

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

Di sản:

Cập nhật cho trận chung kết @ angular / cli:

Bên trong angular-cli.jsonbạn có thể chỉ định cổng trong mặc định:

"defaults": {
  "serve": {
    "port": 1337
  }
}

Di sản-er:

Đã thử nghiệm trong angular-cli@1.0.0-beta.22-1

Các máy chủ angular-cliđến từ ember-clidự án. Để cấu hình máy chủ, tạo một .ember-clitệp trong thư mục gốc của dự án. Thêm cấu hình JSON của bạn vào đó:

{
   "port": 1337
}

Khởi động lại máy chủ và nó sẽ phục vụ trên cổng đó.

Có nhiều tùy chọn được chỉ định ở đây: http://ember-cli.com/#r nb-configuration

{
  "skipGit" : true,
  "port" : 999,
  "host" : "0.1.0.1",
  "liveReload" : true,
  "environment" : "mock-development",
  "checkForUpdates" : false
}

— elwyn
nguồn

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 phiên bản 6). Xem ở đây để biết thêm chi tiết .

— Bạn bè của Nathan

73

Trong góc 2 cli@2.3.1,

Để chạy một dự án mới trên các cổng khác nhau, một cách là chỉ định cổng trong khi bạn chạy lệnh ng.

ng serve --port 4201

hoặc theo cách khác, bạn có thể chỉnh sửa một phần tập lệnh script.json và gắn cổng vào biến bắt đầu của bạn như tôi đã đề cập bên dưới và sau đó chỉ cần chạy "npm start"

 "scripts": {

    "ng": "ng",
    "start": "ng serve --port 4201",
    ... : ...,
    ... : ....
}

cách này tốt hơn nhiều khi bạn không cần xác định rõ ràng cổng mỗi lần.

— ankit patel
nguồn

13

Sử dụng tập lệnh npm thay vì ... Chỉnh sửa gói.json của bạn và thêm lệnh vào phần tập lệnh.

{
  "name": "my new project",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 8080",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.26",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

Sau đó, chỉ cần thực hiện npm start

— David Valdivieso
nguồn

Đây là cách chính xác để làm điều này, vĩnh viễn; vì vậy bạn không phải chỉ định tham số dòng lệnh cho --port mỗi lần. Ngoài ra, --host param trong câu trả lời này là bắt buộc để chạy Angular 4 thông qua Vagrant (hoặc bất kỳ hệ thống từ xa nào) để điều này giết chết 2 con chim bằng một viên đá.

— Scott Byers

8

Bây giờ bạn có thể chỉ định cổng trong .angular-cli.json theo mặc định:

"defaults": {
  "styleExt": "scss",
  "serve": {
    "port": 8080
  },
  "component": {}
}

Đã thử nghiệm trong angular-cli v1.0.6

— qorsmond
nguồn

Cảm ơn bạn!!! Điều tương tự đã được thử nghiệm với @ angular / cli: 1.3.0 .

— Techno Cracker

3

Dành cho @ góc / cli v6.2.1

Tệp cấu hình dự án angular.jsoncó thể xử lý nhiều dự án (không gian làm việc) có thể được phục vụ riêng lẻ.

ng config projects.my-test-project.targets.serve.options.port 4201

Trong đó my-test-projectphần là tên dự án bạn đặt với ng newlệnh giống như ở đây:

$ ng new my-test-project
$ cd my-test-project
$ ng config projects.my-test-project.targets.serve.options.port 4201
$ ng serve
** Angular Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201/ **

Di sản:

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 .angular.cli.json của bạn và thêm 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.

— csikosjanos
nguồn

2

Trong Angular 6.0, tôi nhận được 'set / get đã không được dùng trong lệnh config', do đó, điều này không còn hoạt động nữa.

— VanAlbert

2

Theo như Angular CLI: 7.1.4 , có hai cách phổ biến để đạt được việc thay đổi cổng mặc định .

Số 1

Trong angular.json, thêm --porttùy chọn cho servemột phần và sử dụng ng serveđể khởi động máy chủ.

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

Số 2

Trong package.json, thêm --porttùy chọn ng servevà sử dụng npm startđể khởi động máy chủ.

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

— Nghe
nguồn

1

Câu trả lời được cung cấp bởi elwyn là chính xác. Nhưng bạn cũng nên cập nhật cấu hình thước đo cho e2e.

Trong angular.json,

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

Trong e2e / protractor.conf.js

exports.config = {
    allScriptsTimeout: 11000,
    specs: [
        './src/**/*.e2e-spec.ts'
    ],
    capabilities: {
        'browserName': 'chrome'
    },
    directConnect: true,
    baseUrl: 'http://localhost:9000/'
}

— Mã hóa
nguồn

0

Có thể có một tình huống khi bạn muốn sử dụng biến môi trường NodeJS để chỉ định cổng máy chủ dev của CLI. Một trong những giải pháp khả thi là di chuyển máy chủ dev CLI chạy vào tập lệnh NodeJS riêng biệt, nó sẽ đọc giá trị cổng (ví dụ từ tệp .env) và sử dụng nó để thực thi ng servevới porttham số:

// run-env.js
const dotenv = require('dotenv');
const child_process = require('child_process');

const config = dotenv.config()
const DEV_SERVER_PORT = process.env.DEV_SERVER_PORT || 4200;

const child = child_process.exec(`ng serve --port=${DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));

Sau đó, bạn có thể a) chạy tập lệnh này trực tiếp qua node run-env, b) chạy tập lệnh đó qua npm bằng cách cập nhật gói.json chẳng hạn

"scripts": {
  "start": "node run-env"
}

run-env.jsnên cam kết với repo, .envkhông nên. Thông tin chi tiết về cách tiếp cận có thể được tìm thấy trong bài viết này: Cách thay đổi Cổng máy chủ phát triển CLI góc thông qua .env .

— dhilt
nguồn