Bagaimana cara saya meningkatkan sudut 2 (npm) dengan benar ke versi terbaru?

124

Baru-baru ini saya memulai tutorial Angular 2 di https://angular.io/docs/ts/latest/tutorial/ .

dan tinggalkan dengan Angular 2 beta 8. Sekarang saya melanjutkan tutorial dan beta terbaru adalah beta 14.

Jika saya hanya melakukan pembaruan npm beberapa modul (dimuat dengan tutorial) diperbarui tetapi tidak Angular2 (saya dapat melihat bahwa dengan npm ls ).

Jika saya melakukan npm perbarui angular 2 atau npm perbarui angular2@2.0.0beta.14 itu tidak melakukan apa-apa juga.

npm  angular 
— dragonmnl
sumber
1
npm install angular2@2.0.0beta.14 --saveharus melakukannya, saya pikir.
— Joe Clay
ya, itu berhasil. lihat komentar saya untuk jawaban Cosmin
— dragonmnl
2
Untuk orang-orang yang datang ke ini dari Google, ketahuilah bahwa mungkin ada masalah setelah memperbarui Angular itu sendiri, yang mengharuskan Anda juga memperbarui angular-cli jika Anda menggunakannya. Lihat github.com/angular/angular-cli#updating-angular-cli untuk detail tentang caranya.
— jmq
— yurzui
Gunakan npm instal -g npm-periksa-pembaruan, periksa di sini freakyjolly.com/how-to-update-local-angular-cli-version
— Code Spy

Jawaban:

207

Perintah npm update -D && npm update -Sakan memperbarui semua paket di dalam package.jsonke versi terbaru mereka, sesuai dengan kisaran versi yang ditentukan . Anda dapat membaca lebih lanjut di sini .

Jika Anda ingin memperbarui Angular dari versi sebelumnya 2.0.0-rc.1, maka Anda perlu mengedit secara manual package.json, karena Angular dibagi menjadi beberapa modul npm. Tanpa ini, seperti yang ditunjukkan oleh paket angular22.0.0-beta.21 , Anda tidak akan pernah bisa menggunakan versi terbaru Angular.
Daftar dengan beberapa modul paling umum yang perlu Anda mulai dapat ditemukan di repositori quickstart .

Catatan:

  • Cara keren untuk tetap up to date dengan versi terbaru paket Anda adalah dengan menggunakan npm outdatedyang menunjukkan Anda semua paket usang bersama dengan versi terbaru dan yang diinginkan.

  • Alasan mengapa kita perlu mengaitkan dua perintah, npm update -Ddan npm update -Suntuk mengatasi bug ini sampai diperbaiki.

— Cosmin Ababei
sumber
2
Terima kasih, Cosmin. Saya mengikuti saran Joe Clay dan itu berhasil. Namun Anda adalah solusi yang lebih umum yang pasti bagus. Saya juga merekomendasikan menggunakan npm-install-missing (paket npm lain) jika ada dependensi yang ketinggalan zaman.
— dragonmnl
3
Modul itu cukup tua dan saya pikir itu karena fakta bahwa NPM mengalami beberapa masalah dengan npm update, yang diperbaiki sementara itu. Cara keren untuk melihat apakah npm update --saveberhasil adalah melihat apakah npm outdatedtidak menampilkan apa pun.
— Cosmin Ababei
npm instal @angular not angular2 :-)
— Elisabeth
1
Nama npm saya adalah @angular. angular2 sebelum jenis beta17 seperti itu
— Elisabeth
1
@Elisabeth Akhirnya saya mengerti dan saya akan memperbarui jawaban saya. Terima kasih!
— Cosmin Ababei
54

Paket bagus lainnya yang saya gunakan untuk bermigrasi dari versi beta Angular2 ke Angular2 2.0.0 finaladalahnpm-check-updates

Ini menunjukkan versi terbaru yang tersedia dari semua paket yang ditentukan dalam package.json Anda. Berbeda dengan npm outdateditu juga mampu mengedit package.json Anda, memungkinkan Anda untuk melakukan npm upgradenanti.

Install

sudo npm install -g npm-check-updates

Pemakaian

ncuuntuk tampilan

ncu -u untuk menulis ulang package.json Anda

— Tujuh
sumber
karya bagus untuk saya tapi apa yang akan dilakukan stackoverflow.com/a/46148361/2055782 ?
— mo sean
31

Tingkatkan ke Angular 5 terbaru

Paket Dep Sudut: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Paket lain yang diinstal oleh cli sudut npm install --save core-js@latest rxjs@latest zone.js@latest

Paket Dev Angular: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

Paket Tipe Dev: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Paket-paket lain yang diinstal sebagai dev dev oleh sudut sudut: npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest

Instal versi terbaru yang didukung yang digunakan oleh Angular cli (jangan lakukan @latest): npm install --save-dev typescript@2.4.2

Ganti nama file angular-cli.json menjadi .angular-cli.json dan perbarui konten:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project3-example"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}
— Isak La Fleur
sumber
Luar biasa. Perhatikan bahwa rxjs@latestdiperbarui 6.0.0yang saat ini tidak kompatibel dengan versi Angular terakhir ( 5.2.1). Saya harus kembali secara manual dan itu baik-baik saja.
— David D.
13

UPDATE:
Mulai dari CLI v6 Anda bisa menjalankannya ng updateagar dependensi Anda diperbarui secara otomatis ke versi baru.

Dengan ng updateterkadang Anda mungkin ingin menambahkan --forcebendera. Jika Anda melakukannya, pastikan bahwa versi naskah yang Anda pasang dengan cara ini didukung oleh versi sudut Anda saat ini, jika tidak, Anda mungkin perlu menurunkan versi versi naskah.

Periksa juga panduan ini Memperbarui proyek Angular Anda

Untuk pengguna bash saja

Jika Anda aktif Mac/Linuxatau menjalankan bash on Windows(yang tidak akan berfungsi secara default Windows CMD), Anda dapat menjalankan oneliner itu:

npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5 --save

yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5

Cukup tentukan versi yang tidak Anda inginkan misalnya @ 4.4.5 atau masukkan @latest untuk mendapatkan yang terbaru

Periksalah package.jsonhanya untuk memastikan Anda memperbarui semua @angular/*paket yang diandalkan oleh aplikasi Anda

  • Untuk melihat @angularversi persisnya dalam menjalankan proyek Anda:
    npm ls @angular/compileratauyarn list @angular/compiler
  • Untuk memeriksa @angularversi stabil terbaru yang tersedia di npm run:
    npm show @angular/compiler version
— kuncevic.dev
sumber
7

Halaman npm resmi menyarankan metode terstruktur untuk memperbarui versi sudut untuk skenario global dan lokal.

1.Pertama-tama, Anda perlu menghapus sudut saat ini dari sistem Anda.

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli

2. Bersihkan cache

npm cache clean

EDIT

Seperti yang ditunjukkan oleh @candidj

npm cache cleandiganti namanya mulai npm cache verifydari npm 5 dan seterusnya

3. Pasang sudut secara global

npm install -g @angular/cli@latest

4. Setup proyek lokal jika Anda memilikinya

rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install

Silakan periksa hal yang sama pada tautan di bawah ini:

https://www.npmjs.com/package/@angular/cli#updating-angular-cli

Ini akan menyelesaikan masalah.

— Jithin
sumber
1
npm cache cleansekarang diubah menjadi `npm cache memverifikasi` padanpm 5
— candidJ
4

Pendekatan alternatif menggunakan npm-upgrade :

  1. npm i -g npm-upgrade

Buka folder proyek Anda

  1. npm-upgrade check

Ini akan menanyakan apakah Anda ingin memperbarui paket, pilih Ya

Sederhana saja

— Zameer
sumber
3

Jika Anda ingin menginstal / meningkatkan semua paket ke versi terbaru dan Anda menjalankan windows Anda dapat menggunakan ini di powershell.exe:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
    npm install @angular/$package@latest -E
}

Jika Anda juga menggunakan cli, Anda dapat melakukan ini:

foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
    iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}

Ini akan menyimpan paket-paket yang tepat (-E), dan paket-paket klien di devDependencies(-D)

— Poul Kruijt
sumber
itu tidak bekerja untuk saya, selalu mengatakan ketergantungan yang tidak terpenuhi: /
— DS_web_developer
@DS_web_developer tidak apa-apa. Itu hanya peringatan, bukan kesalahan
— Poul Kruijt
sayangnya tidak, katanya GAGAL, ​​dan paket json saya tidak diperbarui tentu saja (dependensi yang tidak terpenuhi adalah untuk masing-masing paket sudut)
— DS_web_developer
apa dependensi yang belum terpenuhi?
— Poul Kruijt
1
Ah, saya rasa ketergantungan yang belum terpenuhi ini TypeScript , karena ng5 terbaru membutuhkan versi ts yang lebih tinggi :)
— Poul Kruijt
2

Mulai saja di sini:

https://update.angular.io

Pilih versi yang Anda gunakan dan itu akan memberi Anda panduan langkah demi langkah.

Saya sarankan memilih 'Tingkat Lanjut' untuk melihat semua langkah. Kompleksitas adalah konsep relatif - dan saya tidak tahu ide bodohnya tentang fitur ini, tetapi jika Anda memilih 'Dasar' tidak akan menunjukkan semua langkah yang diperlukan dan Anda mungkin kehilangan sesuatu yang penting yang menggunakan aplikasi 'Dasar' Anda. .

masukkan deskripsi gambar di sini

Pada versi 6 ada perintah Angular CLI baru ng updateyang secara cerdas melewati dependensi Anda dan melakukan pemeriksaan untuk memastikan Anda memperbarui hal-hal yang benar :-)

Langkah-langkahnya akan menguraikan cara menggunakannya :-)

— Simon_Weaver
sumber
Jangan bingung NgUpgradedengan ng update. NgUpgradeadalah untuk memperbarui AngularJS ke Angular
— Simon_Weaver
Baru-baru ini saya punya banyak masalah memperbarui, terutama kesalahan yang berhubungan dengan materi sudut. Saya harus menghapus konten node_modulesdan menjalankan npm install3 pembaruan terakhir - bahkan 6.0 -> 6.1. Tidak tahu mengapa, tetapi jika Anda mendapatkan banyak kesalahan aneh pada pembaruan sederhana maka cobalah.
— Simon_Weaver
1

uninstall npm --save-dev angular-cli

npm instal --save-dev @ angular / cli @ latest

ng perbarui @ angular / cli

ng perbarui @ angular / core --force

ng perbarui @ angular / material atau npm i @ angular / cdk @ 6 @ angular / material @ 6 - save

npm pasang skrip @ '> = 2.7.0 <2.8.0'

— KatyaKrym
sumber
0

Cara terbaik untuk melakukannya adalah menggunakan ekstensi (pflannery.vscode-versionlens) dalam vscode.

ini memeriksa semua memuaskan dan memeriksa paling cocok.

saya punya banyak masalah dengan memperbarui dan menjaga unit aplikasi saya berfungsi, saya membiarkan verbose lense melakukan pemeriksaan dan kemudian saya jalankan

npm saya

untuk menginstal dependensi yang baru disarankan.

— SamYah
sumber
0

Jika Anda terlihat seperti saya untuk memperbarui proyek Anda ke yang terbaru, inilah yang berhasil saya lakukan sejak Angular 6:

Buka konsol di folder proyek Anda: If you type: ng updatemaka Anda akan mendapatkan pesan di bawah ini:

        We analyzed your package.json, there are some packages to update:

          Name                               Version                  Command to update
         --------------------------------------------------------------------------------
          @angular/cli                       7.0.7 -> 7.2.2           ng update @angular/cli
          @angular/core                      7.0.4 -> 7.2.1           ng update @angular/core

There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

Jadi saya biasanya langsung dan melakukan:

ng update --all

Akhirnya Anda dapat memeriksa versi baru Anda:

ng version

Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4
— Ernest
sumber
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.