Bagaimana mengubah port sudut dari 4200 ke yang lain


256

Saya ingin menggunakan 5000 bukan 4200 ..

Apa yang saya coba adalah saya telah membuat file dengan nama root ember-clidan menempatkan JSON sesuai dengan kode di bawah ini:

{
   "port": 5000
}

Tapi aplikasi saya masih berjalan di 4200, bukan 5000



Apakah Anda juga me-restart server?
Keris

yes @kristjanreinhold
Ashutosh Jha

Apakah ini menjawab pertanyaan Anda? server angular-cli - cara menentukan port default
elwyn

Jawaban:


428

Solusinya bekerja untuk saya adalah

ng serve --port 4401    

(Anda dapat mengubah 4401 ke nomor apa pun yang Anda inginkan)

Kemudian luncurkan browser -> http: // localhost: 4401 /

Pada dasarnya, saya memiliki dua Aplikasi dan dengan bantuan pendekatan di atas sekarang saya dapat menjalankan keduanya secara bersamaan di lingkungan pengembangan saya.


Opsi '--port 4201' tidak terdaftar dengan perintah serve
holms

5
sidenote untuk orang lain: jangan lakukan npm start --port 4401karena npm startsepertinya tidak mengeksekusi --port
Jordec

1
Silakan lihat jawaban ini juga stackoverflow.com/a/52345586/3209545
callee.args

hanya tambahan, Anda dapat sekaligus membuka aplikasi yang disajikan di tab browser baru dengan menambahkan ng serve --port 4401 --open
briancollins081

114

Anda dapat mengubah port aplikasi Anda dengan memasukkan perintah berikut,

ng lay --port 4200

Juga, untuk pengaturan permanen Anda dapat mengubah port dengan mengedit file angular-cli.json

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

2
Dalam rilis yang lebih baru, Anda harus menggunakan ng serve --port 8080 (bukan ":", sebagai gantinya, kosongkan ruang).
Julian L.

Jika ini adalah pengaturan "default" terakhir, Anda harus menyingkirkan tanda koma
Oswaldo Salazar

1
Ini telah berubah dalam versi CLI terbaru - lihat jawaban saya untuk lebih jelasnya.
Nathan Friend

98

Tampaknya hal-hal telah berubah dalam versi CLI terbaru (saya menggunakan 6.0.1). Saya dapat mengubah port default yang digunakan ng servedengan menambahkan portopsi ke proyek saya angular.json:

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

(Hanya properti yang relevan yang ditampilkan dalam contoh ini.)


Dan saya ingin mengubah tuan rumah juga
Kunvar Singh

ini benar-benar jawaban permanen yang tepat
WtFudgE

59

Mengubah nodel_modules/angular-cli/commands/server.jsadalah ide yang buruk karena itu akan diperbarui ketika Anda menginstal versi baru angular-cli. Alih-alih, Anda harus menentukan ng serve --port 5000 di package.jsonseperti ini:

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

Anda juga dapat menentukan host dengan --host 127.0.0.1


Bagaimana Anda memulai Aplikasi? ng serve? Sepertinya tidak berfungsi ketika saya mengecek di browser dengan,localhost:5000
Ashish Ranjan

1
Saya pikir ini harus menjadi jawaban yang diterima. Hampir untuk orang yang menggunakan npm startsebagai perintah
blobmaster

Mengapa menggunakan opsi skrip untuk konfigurasi permanen? Ada file untuk ini, dan ituangular.json
Mozgor

59

Lokasi untuk pengaturan port telah berubah beberapa kali.

Jika menggunakan Angular CLI 1

Perubahan angular-cli.json

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

Jika menggunakan CLI Angular terbaru

Perubahan angular.json

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

Tanpa mengubah file apa pun

Jalankan perintah

ng serve --host 0.0.0.0 --port 5000

8
Ini harus dianggap sebagai jawaban yang benar karena mencakup kedua kemungkinan: solusi permanen atau sementara.
Daniel Santana

1
Saya setuju dengan
@Dan

Jika ada perubahan permanen, tahukah Anda jika port baru harus ditentukan di tempat lain dalam file `angular.json` ini? serveLevel opsi saya berisi dua item dengan browserTarget, optionsdan configurations/production. Haruskah saya menambahkan portentri baru ini di keduanya atau hanya optionssatu?
Mozgor

19

Tidak ada yang memperbarui jawaban untuk CLI.Dengan Angular terbaru Angular CLI

Dengan latest versiondari angular-cli di mana angular-cli.json berganti nama menjadi angular.json, Anda dapat mengubah port dengan mengedit angular.jsonfile yang sekarang Anda tentukan port per"project"

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

Baca lebih lanjut tentang itu here


Bagaimana dengan entri `melayani / konfigurasi / produksi` yang juga berisi browserTargetentri, sama seperti di serve / optionsmana kita menambahkan yang baru port?
Mozgor

1
Jawaban terbaik untuk versi terbaru dari Angular CLI
Dacomis

14

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

ng set defaults.serve.port=4201

Perubahan itu mengubah Anda .angular.cli.jsondan menambahkan pengaturan port seperti yang disebutkan sebelumnya .

Setelah perubahan ini, Anda dapat menggunakan secara sederhana ng servedan itu akan menggunakan port yang disukai tanpa perlu menetapkannya setiap waktu.


get / set tampaknya sudah tidak digunakan lagi karena mendukung konfigurasi 6.0, jadi ini tidak lagi berfungsi.
VanAlbert

10

Anda juga dapat memasukkan perintah di bawah ini di sudut ang Anda di mana Anda biasanya memasukkan start npm

ng serve --host "ip-address" --port "port-number"



6

kebagian file ini

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

dan cari port

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

ubah nilai default apa pun yang Anda inginkan dan mulai ulang server


Bekerja untuk saya, hanya perlu memperhatikan untuk mengubah file yang disebutkan dan bukan yang lain- node_modules/@angular/cli/lib/config/schema.json yang mengandung properti yang sama.
lingar

5
  • Untuk Permanen:

    Goto nodel_modules / sudut-cli / perintah / server.js Cari var defaultPort = process.env.PORT || 4200; dan ubah 4200 menjadi hal lain yang Anda inginkan.

  • Untuk Menjalankan Sekarang:

    ng serve --port 4500 (Anda mengganti 4500 ke nomor apa pun yang ingin Anda gunakan sebagai porta)


1
Saya tidak berpikir mengubah isi paket yang diinstal secara lokal pada node_modulesadalah praktik yang baik.
Bruno Brant

5

Tidak disarankan untuk mengubah modul simpul karena pembaruan atau pemasangan ulang dapat menghapus perubahan itu. Jadi lebih baik untuk mengubah cli sudut

Sudut 9 di angular.json

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

4

Anda dapat mengedit nomor port default yang dikonfigurasi dalam file serve.js.

Path akan project_direcory/node_modules/angular-cli/commands/serve.js.

Cari baris ini -> var defaultPort = process.env.PORT || 4200;
Ganti dengan baris ini ->var defaultPort = process.env.PORT || 5000;


4
Jika Anda membaca ini dan mempertimbangkan untuk melakukannya ... tolong, jangan pernah mengedit file ketergantungan.
emix



4

Di angular.json:

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

Saya menggunakan angular-cli. Ini berhasil untuk saya.


4

dalam sudut 2 ++.

Untuk mengubah port, Anda dapat menjalankan perintah di bawah ini di terminal:

ng serve --host 0.0.0.0 --port 5000.

2

Meskipun sudah ada banyak solusi yang valid dalam jawaban di atas, berikut adalah panduan visual dan solusi spesifik untuk proyek Angular 7 (mungkin versi sebelumnya juga, tidak ada jaminan sekalipun) menggunakan Visual Studio Code. Temukan schema.json di direktori seperti yang ditunjukkan pada pohon gambar dan ubah bilangan bulat di bawah port -> default untuk perubahan port permanen di browser.

masukkan deskripsi gambar di sini


@ s34N Senang mendengarnya. Jika jawaban itu membantu, harap ingat untuk memberikan suara positif pada posting jika belum dilakukan. Terima kasih sobat.
themightyhulk

2

Buka angular.jsonfile,

Cari kata kunci "sajikan":

Tambahkan portkata kunci seperti yang ditunjukkan di bawah ini:

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

1

Kami memiliki dua cara untuk mengubah nomor port default di Angular.

Cara pertama untuk memberi perintah:

ng serve --port 2400 --open

Cara kedua adalah dengan konfigurasi di lokasi: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Buat perubahan pada schema.jsonfile.

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

Tidak disarankan untuk mengubah file dalam node_modules yang mungkin ditimpa setelah menginstal ulang paket. Solusi yang sangat baik disajikan oleh Sajeetharan.
Daniel Santana

1

Lari saja

ng layani --port yourport

Contoh:

ng serve --port 4401


1

Kode yang berfungsi untuk saya adalah sebagai berikut

ng serve --port ABCD

Sebagai contoh

ng serve --port 6300

0

Untuk menjalankan dan membuka di browser secara otomatis menggunakan bendera -openatau adil-o

ng serve -o --port 4200

Catatan: Port 4200 bersifat arbitrer. Ini bisa menjadi port pilihan Anda


0

Jika Anda ingin menggunakan variabel lingkungan NodeJS untuk mengatur nilai port server dev Angular CLI, pendekatan berikut dimungkinkan:

  • buat skrip NodeJS, yang akan memiliki akses ke variabel lingkungan (katakanlah, DEV_SERVER_PORT) dan dapat dijalankan ng servedengan --portnilai parameter yang diambil dari variabel itu ( child_process mungkin teman kita di sini):
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()));
  • perbarui package.json untuk menyediakan skrip ini berjalan melalui npm
  • jangan lupa untuk mengatur DEV_SERVER_PORTvariabel lingkungan (dapat dilakukan melalui dotenv )

Berikut ini juga uraian lengkap pendekatan ini: Cara mengubah Port Server Development CLI Angular via .env .


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.