วิธีการเปลี่ยนพอร์ตเชิงมุมจาก 4200 เป็นอื่น ๆ

254

ฉันต้องการใช้ 5000 แทน 4200 ..

สิ่งที่ฉันได้ลองคือฉันสร้างไฟล์ด้วยชื่อรูทember-cliแล้ววาง JSON ตามรหัสด้านล่าง:

{
   "port": 5000
}

แต่แอปของฉันยังคงทำงานบน 4200 แทนที่จะเป็น 5000

angular-cli

— Ashutosh Jha
แหล่งที่มา

2

stackoverflow.com/questions/37154813/ ที่

— Zac Grierson

คุณรีสตาร์ทเซิร์ฟเวอร์ด้วยหรือไม่

— kris

ใช่ @kristjanreinhold

— Ashutosh Jha

นี่ตอบคำถามของคุณหรือไม่? เซิร์ฟเวอร์ angular-cli - วิธีการระบุพอร์ตเริ่มต้น

— elwyn

426

ทางออกสำหรับฉันคือ

ng serve --port 4401

(คุณสามารถเปลี่ยน 4401 เป็นหมายเลขใดก็ได้ที่คุณต้องการ)

จากนั้นเปิดเบราว์เซอร์ -> http: // localhost: 4401 /

โดยพื้นฐานแล้วฉันมีแอพพลิเคชั่นสองตัวและด้วยความช่วยเหลือของวิธีการข้างต้นตอนนี้ฉันสามารถเรียกใช้ทั้งสองพร้อมกันในสภาพแวดล้อมการพัฒนาของฉัน

— เดวิด
แหล่งที่มา

ตัวเลือก '--port 4201' ไม่ได้ลงทะเบียนกับบริการสั่ง

— Holms

5

sidenote สำหรับผู้อื่น: อย่าทำnpm start --port 4401เพราะnpm startดูเหมือนจะไม่รัน --port

— Jordec

1

โปรดดูคำตอบนี้เช่นกันstackoverflow.com/a/52345586/3209545

— callee.args

เพียงแค่นอกจากนี้คุณสามารถเปิดแอปที่ให้บริการในแท็บเบราว์เซอร์ใหม่พร้อมกันโดยเพิ่ม ng serve --port 4401 --open

— briancollins081

114

คุณสามารถเปลี่ยนพอร์ตแอปพลิเคชันของคุณโดยป้อนคำสั่งต่อไปนี้

ng ให้บริการ - พอร์ต 4200

นอกจากนี้สำหรับการตั้งค่าแบบถาวรคุณสามารถเปลี่ยนพอร์ตได้ด้วยการแก้ไขไฟล์ angular-cli.json

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

— ganesh kalje
แหล่งที่มา

2

ในรุ่นที่ใหม่กว่าคุณควรใช้ ng เสิร์ฟ - พอร์ต 8080 (ไม่ ":", พื้นที่ว่างแทน)

— Julian L.

หากนี่เป็นการตั้งค่า "ค่าเริ่มต้น" ครั้งสุดท้ายคุณควรกำจัดเครื่องหมายจุลภาคต่อท้าย

— Oswaldo Salazar

1

สิ่งนี้มีการเปลี่ยนแปลงใน CLI เวอร์ชันล่าสุด - ดูคำตอบของฉันสำหรับรายละเอียดเพิ่มเติม

— นาธานเพื่อน

98

ดูเหมือนว่าสิ่งต่าง ๆ จะมีการเปลี่ยนแปลงใน CLI รุ่นล่าสุด (ฉันกำลังใช้6.0.1) ฉันสามารถเปลี่ยนพอร์ตเริ่มต้นที่ใช้ng serveโดยเพิ่มportตัวเลือกในโครงการของฉันangular.json:

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

(แสดงเฉพาะคุณสมบัติที่เกี่ยวข้องในตัวอย่างนี้)

— เพื่อนนาธาน
แหล่งที่มา

และฉันต้องการเปลี่ยนโฮสต์ด้วย

— คุนวาร์ซิงห์

นี่เป็นคำตอบที่ถูกต้องจริงๆ

— WtFudgE

59

เปลี่ยนเป็นความคิดที่ไม่ดีเท่าที่มันจะได้รับการปรับปรุงเมื่อคุณติดตั้งรุ่นใหม่ของnodel_modules/angular-cli/commands/server.js angular-cliแต่คุณควรระบุng เสิร์ฟ - พอร์ต 5000ในpackage.jsonสิ่งนี้:

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

คุณยังสามารถระบุโฮสต์ด้วย--host 127.0.0.1

— Dhyey
แหล่งที่มา

คุณจะเริ่มแอพได้อย่างไร? ng serve? ดูเหมือนจะไม่ทำงานเมื่อฉันตรวจสอบในเบราว์เซอร์ด้วยlocalhost:5000

— Ashish Ranjan

1

ฉันคิดว่านี่ควรเป็นคำตอบที่ยอมรับได้ เกือบสำหรับชาวบ้านที่ใช้npm startเป็นคำสั่ง

— blobmaster

เหตุใดจึงต้องใช้ตัวเลือกสคริปต์สำหรับการกำหนดค่าถาวร มีไฟล์สำหรับสิ่งนี้และมันคือangular.json

— Mozgor

59

ตำแหน่งสำหรับการตั้งค่าพอร์ตเปลี่ยนไปสองสามครั้ง

หากใช้ Angular CLI 1

เปลี่ยนแปลง angular-cli.json

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

หากใช้ Angular CLI ล่าสุด

เปลี่ยนแปลง angular.json

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

โดยไม่ต้องเปลี่ยนไฟล์ใด ๆ

เรียกใช้คำสั่ง

ng serve --host 0.0.0.0 --port 5000

— arsanyf
แหล่งที่มา

8

นี่ควรได้รับการพิจารณาว่าเป็นคำตอบที่ถูกต้องเนื่องจากครอบคลุมทั้งความเป็นไปได้: วิธีแก้ปัญหาแบบถาวรหรือชั่วคราว

— Daniel Santana

1

ฉันเห็นด้วยกับ @Dan

— marknt15

ในกรณีที่มีการเปลี่ยนแปลงถาวรคุณรู้หรือไม่ว่าควรระบุพอร์ตใหม่ที่อื่นในไฟล์ `angular.json 'นี้หรือไม่ ของฉันserveระดับตัวเลือกที่มีสองรายการที่มีbrowserTarget, และoptions configurations/productionฉันควรเพิ่มportรายการใหม่นี้ทั้งในรายการเหล่านั้นหรือเพียงรายการoptionsเดียว?

— Mozgor

19

ไม่มีใครอัปเดตคำตอบสำหรับ Angular CLI ล่าสุดได้ล่าสุด Angular CLI

ด้วยlatest versionangular-cli ซึ่ง angular-cli.json เปลี่ยนชื่อเป็นangular.jsonคุณสามารถเปลี่ยนพอร์ตโดยแก้ไขangular.jsonไฟล์ที่คุณระบุพอร์ตต่อ"project"

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

อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ here

— Sajeetharan
แหล่งที่มา

สิ่งที่เกี่ยวกับรายการ `บริการ / การกำหนดค่า / การผลิต 'ซึ่งยังมีbrowserTargetรายการเช่นเดียวกับserve / optionsที่เราเพิ่มใหม่port?

— Mozgor

1

คำตอบที่ดีที่สุดสำหรับ Angular CLI รุ่นล่าสุด

— Dacomis

14

ฉันมักจะใช้ng setคำสั่งเพื่อเปลี่ยนการตั้งค่า Angular CLI สำหรับระดับโครงการ

ng set defaults.serve.port=4201

มันเปลี่ยนแปลงเปลี่ยน.angular.cli.jsonและเพิ่มการตั้งค่าพอร์ตเป็นมันกล่าวก่อนหน้านี้

หลังจากการเปลี่ยนแปลงนี้คุณสามารถใช้งานได้อย่างง่ายดายng serveและมันจะใช้พอร์ตที่ต้องการโดยไม่จำเป็นต้องระบุทุกครั้ง

— csikosjanos
แหล่งที่มา

get / set ดูเหมือนจะถูกคัดค้านการกำหนดค่าใน 6.0 ดังนั้นจึงใช้งานไม่ได้อีกต่อไป

— VanAlbert

10

นอกจากนี้คุณยังสามารถป้อนคำสั่งด้านล่างใน cli เชิงมุมของคุณซึ่งปกติคุณใส่เริ่มต้น NPM

ng ให้บริการ - โฮสต์ "ที่อยู่ ip" - พอร์ต "หมายเลขพอร์ต"

— Ajitesh Jaiswal
แหล่งที่มา

7

คุณยังสามารถเขียนคำสั่งนี้: ng serve -p 5000

— Sara Vaseei
แหล่งที่มา

1

ตกลง. มันเป็นมือสั้น Syntex ยอดเยี่ยม

— Ashutosh Jha

ฉันใช้มันในมุม 4!

— Sara Vaseei

6

ไปที่ไฟล์นี้

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

และค้นหาพอร์ต

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

เปลี่ยนค่าเริ่มต้นสิ่งที่คุณต้องการและรีสตาร์ทเซิร์ฟเวอร์

— Sohail Ahmad
แหล่งที่มา

ใช้งานได้สำหรับฉันเพียงแค่ต้องแจ้งให้ทราบเพื่อเปลี่ยนไฟล์ที่กล่าวถึงไม่ใช่ไฟล์อื่นnode_modules/@angular/cli/lib/config/schema.json ที่มีคุณสมบัติเดียวกัน

— lingar

5

สำหรับถาวร:

ไปที่nodel_modules / angular-cli / คำสั่ง / server.js ค้นหาvar defaultPort = process.env.PORT | | 4200; และเปลี่ยน 4200 เป็นสิ่งอื่นที่คุณต้องการ
วิธีเรียกใช้ตอนนี้:

ng เสิร์ฟ - พอร์ต 4500 (คุณเปลี่ยน 4500 เป็นหมายเลขใด ๆ ที่คุณต้องการใช้เป็นพอร์ตของคุณ)

— Deepak Swain
แหล่งที่มา

1

ฉันไม่คิดว่าการเปลี่ยนเนื้อหาของแพ็คเกจที่ติดตั้งไว้ในnode_modulesเครื่องเป็นวิธีปฏิบัติที่ดี

— บรูโน่แบรนต์

5

ไม่แนะนำให้เปลี่ยนในโมดูลโหนดเนื่องจากการอัพเดตหรือการติดตั้งใหม่อาจลบการเปลี่ยนแปลงเหล่านั้น ดังนั้นดีกว่าที่จะเปลี่ยนแปลงใน CLI เชิงมุม

Angular 9 ใน angular.json

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

— ยัม
แหล่งที่มา

4

คุณสามารถแก้ไขหมายเลขพอร์ตเริ่มต้นที่กำหนดค่าไว้ในไฟล์ serv.js

project_direcory/node_modules/angular-cli/commands/serve.jsเส้นทางจะ

ค้นหาบรรทัดนี้ -> var defaultPort = process.env.PORT || 4200;
แทนที่ด้วยบรรทัดนี้ ->var defaultPort = process.env.PORT || 5000;

— Amruth LS
แหล่งที่มา

4

หากคุณกำลังอ่านข้อความนี้อยู่และกำลังพิจารณาที่จะทำเช่นนั้นโปรดได้โปรดอย่าแก้ไขไฟล์อ้างอิง

— emix

4

เพียงแค่เรียกใช้ ng serve --port 5000 --open

— Daniel Torres Laserna
แหล่งที่มา

4

เรียกใช้คำสั่งด้านล่างนี้นอกเหนือจาก 4200

ng serve --port 4500

— Sagar Jadhav
แหล่งที่มา

4

ใน angular.json:

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

ฉันกำลังใช้ angi-cli สิ่งนี้ใช้ได้สำหรับฉัน

— Deepak Singla
แหล่งที่มา

4

ในเชิงมุม 2 ++

หากต้องการเปลี่ยนพอร์ตคุณสามารถเรียกใช้คำสั่งด้านล่างในเทอร์มินัล:

ng serve --host 0.0.0.0 --port 5000.

— นิตยานันท์
แหล่งที่มา

2

แม้ว่าจะมีคำตอบที่ถูกต้องอยู่มากมายในคำตอบข้างต้น แต่นี่เป็นคำแนะนำแบบเห็นภาพและวิธีแก้ปัญหาเฉพาะสำหรับโครงการ Angular 7 (อาจเป็นรุ่นก่อนหน้านี้เช่นกัน ค้นหา schema.json ในไดเรกทอรีตามที่แสดงในแผนผังรูปภาพและแก้ไขจำนวนเต็มภายใต้พอร์ต -> เริ่มต้นสำหรับการเปลี่ยนพอร์ตถาวรในเบราว์เซอร์

— themightyhulk
แหล่งที่มา

@ s34N ดีใจที่ได้ยินเช่นนั้น หากคำตอบนั้นช่วยได้โปรดอย่าลืมโหวตขึ้นโพสต์หากยังไม่ได้ดำเนินการ ขอบคุณเพื่อน

— themightyhulk

2

ไปที่angular.jsonไฟล์

ค้นหาคำว่า "เสริฟ":

เพิ่มportคำหลักตามที่แสดงด้านล่าง:

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

— แพรพรรณ MB
แหล่งที่มา

1

เรามีสองวิธีในการเปลี่ยนหมายเลขพอร์ตเริ่มต้นใน 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
    },

— Satyendra Patel
แหล่งที่มา

ไม่แนะนำให้เปลี่ยนไฟล์ใน node_modules ที่อาจถูกเขียนทับหลังจากติดตั้งแพ็กเกจใหม่ โซลูชั่นที่ดีมากถูกนำเสนอโดย Sajeetharan

— Daniel Santana

1

เพียงแค่เรียกใช้

ng เสิร์ฟ - พอร์ตyourport

ตัวอย่าง:

ng serve --port 4401

— Akitha_MJ
แหล่งที่มา

1

รหัสทำงานให้ฉันเป็นดังนี้

ng serve --port ABCD

ตัวอย่างเช่น

ng serve --port 6300

— กระเพราโมฮัมเหม็ด
แหล่งที่มา

0

หากต้องการเรียกใช้และเปิดในเบราว์เซอร์ให้ใช้แฟล็ก-openหรือโดยอัตโนมัติ-o

ng serve -o --port 4200

หมายเหตุ:พอร์ต 4200 นั้นเป็นอิสระ มันสามารถพอร์ตใด ๆ ที่คุณเลือก

— Fouad Boukredine
แหล่งที่มา

0

หากคุณต้องการใช้ตัวแปรสภาพแวดล้อม NodeJS เพื่อตั้งค่าพอร์ตของเซิร์ฟเวอร์ Angular CLI dev วิธีต่อไปนี้เป็นไปได้:

สร้างสคริปต์ NodeJS ซึ่งจะมีการเข้าถึงตัวแปรสภาพแวดล้อม (พูด, DEV_SERVER_PORT) และสามารถเรียกใช้ng serveด้วย--portค่าพารามิเตอร์ที่นำมาจากตัวแปรนั้น ( child_processอาจเป็นเพื่อนของเราที่นี่):

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

update package.json เพื่อให้สคริปต์นี้ทำงานผ่านทาง npm
อย่าลืมตั้งค่าDEV_SERVER_PORTตัวแปรสภาพแวดล้อม (สามารถทำได้ผ่านdotenv )

นี่คือคำอธิบายที่สมบูรณ์ของวิธีการนี้: วิธีเปลี่ยน Angular CLI Development Server Port ผ่าน . env

— dhilt
แหล่งที่มา

0

นี่จะเปิดหน้าต่างของคุณโดยอัตโนมัติเช่นกัน

ng serve -o --port 4801

— Rusty Shackleford
แหล่งที่มา