कोणीय-क्ली सर्वर - डिफ़ॉल्ट पोर्ट कैसे निर्दिष्ट करें


130

ng serveकमांड के साथ कोणीय-क्ली का उपयोग करते हुए , मैं एक डिफ़ॉल्ट पोर्ट कैसे निर्दिष्ट कर सकता हूं इसलिए मुझे --portहर बार ध्वज को मैन्युअल रूप से पास करने की आवश्यकता नहीं है ?

मैं डिफ़ॉल्ट पोर्ट 4200 से बदलना चाहूंगा।

जवाबों:


225

@ कोणीय / cli @ 9.x: और के लिए अपडेट करें

में angular.jsonआप प्रति "परियोजना" किसी पोर्ट का उल्लेख कर सकते हैं

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

सभी उपलब्ध विकल्प:

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

वैकल्पिक रूप से, आप पोर्ट को हर बार निर्दिष्ट कर सकते हैं जब एनजी इस तरह से चल रहा हो:

ng serve --port 1337

इस दृष्टिकोण के साथ आप इसे अपने पैकेज में एक स्क्रिप्ट में रखना चाह सकते हैं। हर बार इसे चलाने में आसान बनाने के लिए या अपनी टीम के अन्य लोगों के साथ कॉन्फ़िगरेशन साझा करना आसान बनाएं:

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

लिगेसी:

@ कोणीय / क्ली फ़ाइनल के लिए अपडेट:

अंदर angular-cli.jsonआप डिफ़ॉल्ट में पोर्ट निर्दिष्ट कर सकते हैं:

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

विरासत-er:

कोणीय-cli@1.0.0-beta.22-1 में परीक्षण किया गया

सर्वर परियोजना angular-cliसे आता है ember-cli। सर्वर को कॉन्फ़िगर करने के लिए, .ember-cliप्रोजेक्ट रूट में एक फ़ाइल बनाएं । वहां अपना JSON कॉन्फिगर जोड़ें:

{
   "port": 1337
}

सर्वर को पुनरारंभ करें और यह उस पोर्ट पर काम करेगा।

यहाँ अधिक विकल्प निर्दिष्ट हैं: http://ember-cli.com/#runtime-configuration

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

ऐसा लगता है कि सीएलआई के हाल के संस्करणों में चीजें बदल गई हैं (मैं संस्करण 6 का उपयोग कर रहा हूं)। अधिक जानकारी के लिए यहां देखें
नाथन मित्र

73

कोणीय 2 में cli@2.3.1,

अलग-अलग पोर्ट पर एक नया प्रोजेक्ट चलाने के लिए, एक तरीका पोर्ट निर्दिष्ट करना है जबकि आप एनजी सर्व कमांड चलाते हैं।

ng serve --port 4201

या दूसरे तरीके से, आप अपने package.json फ़ाइल स्क्रिप्ट भाग को संपादित कर सकते हैं और पोर्ट को अपने प्रारंभ चर में संलग्न कर सकते हैं जैसे मैंने नीचे उल्लेख किया है और फिर बस "npm start" चलाएं

 "scripts": {

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

यह तरीका बहुत बेहतर है जहाँ आपको हर बार पोर्ट को स्पष्ट रूप से परिभाषित करने की आवश्यकता नहीं है।


13

इसके बजाय npm स्क्रिप्ट का उपयोग करें ... अपना package.json संपादित करें और स्क्रिप्ट अनुभाग में कमांड जोड़ें।

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

फिर बस अमल करो npm start


स्थायी रूप से ऐसा करने का यह सही तरीका है; इसलिए आपको हर बार --port के लिए कमांड-लाइन पैरामीटर निर्दिष्ट करने की आवश्यकता नहीं है। इसके अलावा - इस उत्तर में होश परम को वैग्रंट (या किसी दूरस्थ प्रणाली) के माध्यम से कोणीय 4 चलाने के लिए आवश्यक है, इसलिए यह एक पत्थर से 2 पक्षियों को मारता है।
स्कॉट बायर्स

8

अब आप पोर्ट को निर्दिष्ट कर सकते हैं। डिफ़ॉल्ट के अंतर्गत .angi-cli.json:

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

कोणीय-क्ली v1.0.6 में परीक्षण किया गया


धन्यवाद!!! उसी चीज़ का परीक्षण @ कोणीय / cli: 1.3.0 के साथ किया गया है ।
टेक्नो क्रैकर

3

@ कोणीय / cli v6.2.1 के लिए

प्रोजेक्ट कॉन्फ़िगरेशन फ़ाइल angular.jsonकई प्रोजेक्ट्स (कार्यस्थान) को संभालने में सक्षम है जिसे व्यक्तिगत रूप से परोसा जा सकता है।

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

जहां my-test-projectहिस्सा परियोजना का नाम है, जिसे आप ng newकमांड के साथ यहां की तरह सेट करते हैं:

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

लिगेसी:

मैं आमतौर पर ng setप्रोजेक्ट स्तर के लिए कोणीय सीएलआई सेटिंग्स को बदलने के लिए कमांड का उपयोग करता हूं ।

ng set defaults.serve.port=4201

यह आपके .angular.cli.json को बदलता है और पोर्ट सेटिंग्स को भी जोड़ता है कि पहले बताया गया है

इस परिवर्तन के बाद आप बस ng serveइसका उपयोग कर सकते हैं और इसे हर बार निर्दिष्ट करने की आवश्यकता के बिना पसंदीदा बंदरगाह का उपयोग करने जा रहे हैं।


2
कोणीय 6.0 में, मुझे 'सेट / गेट कॉन्फिग कमांड के पक्ष में हटा दिया गया है', इसलिए यह अब काम नहीं करता है।
वनअल्बर्ट

2

जहां तक एंगुलर सीएलआई: 7.1.4 है , हासिल करने के दो सामान्य तरीके हैं डिफ़ॉल्ट पोर्ट को बदलने के

नंबर 1

में angular.json, भाग शुरू --portकरने के लिए विकल्प जोड़ें serveऔर ng serveसर्वर शुरू करने के लिए उपयोग करें।

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

नंबर 2

में package.json, सर्वर को शुरू --portकरने के लिए विकल्प का ng serveउपयोग करें और जोड़ें npm start

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

1

एल्विन द्वारा प्रदान किया गया उत्तर सही है। लेकिन आपको e2e के लिए प्रोट्रैक्टर कॉन्फिगरेशन भी अपडेट करना चाहिए।

कोणीय.जॉन में,

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

E2e / protractor.conf.js में

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

0

एक स्थिति हो सकती है जब आप कोणीय CLI देव सर्वर पोर्ट को निर्दिष्ट करने के लिए NodeJS पर्यावरण चर का उपयोग करना चाहते हैं। संभावित समाधान में से एक सीएलआई देव सर्वर को एक अलग NodeJS स्क्रिप्ट में चलना है, जो पोर्ट वैल्यू (जैसे .env फ़ाइल से) पढ़ेगा और इसे पैरामीटर के ng serveसाथ निष्पादित करने का उपयोग करेगा।port

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

फिर आप a) इस स्क्रिप्ट को सीधे node run-envb के माध्यम से चला सकते हैं , b) इसे पैकेज से अपडेट करके npm के माध्यम से चला सकते हैं। उदाहरण के लिए, json

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

run-env.jsरेपो के लिए प्रतिबद्ध .envहोना चाहिए , नहीं करना चाहिए। दृष्टिकोण पर अधिक विवरण इस पोस्ट में पाया जा सकता है: .env के माध्यम से कोणीय सीएलआई डेवलपमेंट सर्वर पोर्ट को कैसे बदलना है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.