ตั้งค่าโฮสต์และพอร์ตเริ่มต้นสำหรับ ng ให้บริการในไฟล์กำหนดค่า

ฉันต้องการที่จะทราบว่าฉันสามารถตั้งค่าโฮสต์และพอร์ตในไฟล์ config ดังนั้นผมจึงไม่ต้องพิมพ์

ng serve --host foo.bar --port 80

แทนที่จะเป็นเพียงแค่

ng serve

CLI เชิงมุม 6+

ในรุ่นล่าสุดของเชิงมุมนี้ตั้งอยู่ในไฟล์ config ตัวอย่าง:angular.json

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

นอกจากนี้คุณยังสามารถใช้ng configเพื่อดู / แก้ไขค่า:

ng config projects["my-project"].architect["serve"].options {port:4444}

CLI เชิงมุม <6

ในรุ่นก่อนหน้านี้ถูกตั้งค่าangular-cli.jsonภายใต้defaultsองค์ประกอบ:

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}

ณ ตอนนี้คุณสมบัติดังกล่าวไม่ได้รับการสนับสนุนอย่างไรก็ตามหากนี่เป็นสิ่งที่รบกวนจิตใจคุณอีกทางหนึ่งก็จะอยู่ในแพ็คเกจของคุณ ...

"scripts": {
  "start": "ng serve --host foo.bar --port 80"
}

วิธีนี้คุณสามารถเรียกใช้ npm start

ตัวเลือกอื่นหากคุณต้องการทำสิ่งนี้ข้ามหลายโครงการคือการสร้างนามแฝงซึ่งคุณสามารถตั้งชื่อได้ngserveซึ่งจะใช้คำสั่งข้างต้น

คุณสามารถกำหนดค่าพอร์ต HTTP เริ่มต้นและพอร์ตที่ใช้โดยเซิร์ฟเวอร์ LiveReload ด้วยตัวเลือกบรรทัดคำสั่งสองตัวเลือก:

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

https://github.com/angular/angular-cli

การเปลี่ยนแปลงนี้ใน Angular CLI ล่าสุด

ชื่อไฟล์เปลี่ยนเป็นangular.jsonและโครงสร้างก็เปลี่ยนไป

นี่คือสิ่งที่คุณควรทำ:

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "foo.bar",
                  "port": 80
                }
            }
        }
        ...
    }
}

อีกตัวเลือกหนึ่งคือเรียกใช้ng serveคำสั่งด้วย--portตัวเลือกเช่น

ng serve --port 5050 (เช่นสำหรับพอร์ต 5050)

หรือคำสั่ง: ng serve --port 0จะกำหนดพอร์ตที่พร้อมใช้งานโดยอัตโนมัติ

เรามีสองวิธีในการเปลี่ยนหมายเลขพอร์ตเริ่มต้นใน Angular

วิธีแรกคือโดยคำสั่ง CLI:

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

คุณสามารถบันทึกสิ่งเหล่านี้ในไฟล์ได้ แต่คุณต้องใส่มันลงไป.ember-cli(อย่างน้อยก็ตอนนี้); ดูhttps://github.com/angular/angular-cli/issues/1156#issuecomment-227412924

{
"port": 4201,
"liveReload": true,
"host": "dev.domain.org",
"live-reload-port": 49153
}

แก้ไข: ตอนนี้คุณสามารถตั้งค่าเหล่านี้ใน angular-cli.json ณ กระทำhttps://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9ซึ่งอยู่ใน build 1.0.0-beta.30

หากคุณวางแผนที่จะเรียกใช้โครงการเชิงมุมในhost / IP ที่กำหนดเองและพอร์ตไม่จำเป็นต้องทำการเปลี่ยนแปลงในไฟล์กำหนดค่า

คำสั่งต่อไปนี้ทำงานให้ฉัน

ng serve --host aaa.bbb.ccc.ddd --port xxxx

ที่ไหน

aaa.bbb.ccc.ddd --> IP you want to run the project
xxx --> Port you want to run the project

ตัวอย่าง

ng serve --host 192.168.322.144 --port 6300

ผลลัพธ์สำหรับฉันคือ

หากคุณอยู่บน windows คุณสามารถทำได้ดังนี้:

1. ในไดเรกทอรีรากโครงการของคุณสร้างไฟล์ run.bat
2. เพิ่มคำสั่งด้วยตัวเลือกการกำหนดค่าของคุณในไฟล์นี้ ตัวอย่างเช่น

ng serve --host 192.168.1.2 --open

3. ตอนนี้คุณสามารถคลิกและเปิดไฟล์นี้เมื่อใดก็ตามที่คุณต้องการให้บริการ

นี่ไม่ใช่วิธีมาตรฐาน แต่ใช้งานได้สะดวก (ซึ่งฉันรู้สึก)

นี่คือสิ่งที่ฉันใส่ลงใน package.json (เรียกใช้มุมฉาก 6):

{
  "name": "local-weather-app",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 5000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

จากนั้นเริ่มต้น NPM ธรรมดาจะดึงเนื้อหาของการเริ่มต้น ยังสามารถเพิ่มตัวเลือกอื่น ๆ ให้กับเนื้อหา

ป้อนคำอธิบายรูปภาพที่นี่

สิ่งเดียวที่คุณต้องทำ พิมพ์สิ่งนี้ในพรอมต์คำสั่งของคุณ: ng เสิร์ฟ - พอร์ต 4021 [หรือพอร์ตอื่น ๆ ที่คุณต้องการกำหนดเช่น: 5050, 5051 ฯลฯ ] ไม่จำเป็นต้องทำการเปลี่ยนแปลงในไฟล์

หากคุณต้องการให้ที่อยู่ IP ในเครื่องของคุณเปิดเฉพาะเมื่อใช้งานบริการ ng คุณสามารถทำสิ่งต่อไปนี้:

npm install internal-ip-cli --save
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)