angular-cli server - cara menentukan port default

Menggunakan angular-cli dengan ng serveperintah, bagaimana saya bisa menentukan port default jadi saya tidak perlu melewati --portflag secara manual setiap kali?

Saya ingin mengubah dari port default 4200.

Pembaruan untuk @ angular / cli @ 9.x: dan lebih

Di angular.jsonAnda dapat menentukan port per "proyek"

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

Semua opsi tersedia:

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

Atau, Anda dapat menentukan port setiap kali menjalankan ng melayani seperti ini:

ng serve --port 1337

Dengan pendekatan ini Anda mungkin ingin memasukkan ini ke dalam skrip di paket Anda. Json untuk membuatnya lebih mudah dijalankan setiap kali / bagikan konfigurasi dengan orang lain di tim Anda:

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

Warisan:

Pembaruan untuk @ angular / cli final:

Di dalam angular-cli.jsonAnda dapat menentukan port di default:

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

Legacy-er:

Diuji dalam angular-cli@1.0.0-beta.22-1

Server masuk angular-cliberasal dari ember-cliproyek. Untuk mengkonfigurasi server, buat .ember-clifile di root proyek. Tambahkan konfigurasi JSON Anda di sana:

{
   "port": 1337
}

Mulai ulang server dan itu akan melayani pada port itu.

Ada lebih banyak opsi yang ditentukan di sini: http://ember-cli.com/#runtime-configuration

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

Dalam Angular 2 cli@2.3.1,

Untuk menjalankan proyek baru pada port yang berbeda, salah satu caranya adalah dengan menentukan port saat Anda menjalankan perintah ng serve.

ng serve --port 4201

atau dengan cara lain, Anda dapat mengedit bagian skrip file package.json Anda dan melampirkan port ke variabel awal Anda seperti yang saya sebutkan di bawah ini dan kemudian jalankan "mulai npm"

 "scripts": {

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

cara ini jauh lebih baik di mana Anda tidak perlu mendefinisikan port secara eksplisit setiap waktu.

Gunakan skrip npm sebagai gantinya ... Edit package.json Anda dan tambahkan perintah ke bagian skrip.

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

Maka jalankan saja npm start

Anda sekarang dapat menentukan port di .angular-cli.json di bawah default:

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

Diuji dalam angular-cli v1.0.6

Untuk @ angular / cli v6.2.1

File konfigurasi proyek angular.jsondapat menangani beberapa proyek (ruang kerja) yang dapat dilayani secara individual.

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

Di mana my-test-projectbagiannya adalah nama proyek yang Anda tetapkan dengan ng newperintah seperti di sini:

$ 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/ **

Warisan:

Saya biasanya menggunakan ng setperintah untuk mengubah pengaturan Angular CLI untuk tingkat proyek.

ng set defaults.serve.port=4201

Itu mengubah mengubah .angular.cli.json Anda dan menambahkan pengaturan port seperti yang disebutkan sebelumnya .

Setelah perubahan ini, Anda dapat menggunakan secara sederhana ng servedan itu akan menggunakan port pilihan tanpa perlu menentukannya setiap waktu.

Sejauh Angular CLI: 7.1.4 , ada dua cara umum untuk mencapai mengubah port default .

1

Dalam angular.json, tambahkan --portopsi untuk serveberpisah dan gunakan ng serveuntuk memulai server.

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

2

Dalam package.json, tambahkan --portopsi ke ng servedan gunakan npm startuntuk memulai server.

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

Jawaban yang diberikan oleh elwyn benar. Tetapi Anda juga harus memperbarui konfigurasi busur derajat untuk e2e.

Di angular.json,

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

Di e2e / protractor.conf.js

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

Mungkin ada situasi ketika Anda ingin menggunakan variabel lingkungan NodeJS untuk menentukan port server dev Angular CLI. Salah satu solusi yang mungkin adalah memindahkan CLI dev server ke skrip NodeJS yang terpisah, yang akan membaca nilai port (mis. Dari file .env) dan menggunakannya mengeksekusi ng servedengan portparameter:

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

Maka Anda dapat a) menjalankan skrip ini secara langsung melalui node run-env, b) menjalankannya melalui npm dengan memperbarui package.json, misalnya

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

run-env.jsharus berkomitmen pada repo, .envtidak boleh. Rincian lebih lanjut tentang pendekatan ini dapat ditemukan di posting ini: Cara mengubah Port Server Pengembangan CLI Angular via .env .