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

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 [email protected] itu tidak melakukan apa-apa juga.

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.

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

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 [email protected]

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

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

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.

Pendekatan alternatif menggunakan npm-upgrade :

1. npm i -g npm-upgrade

Buka folder proyek Anda

2. npm-upgrade check

Ini akan menanyakan apakah Anda ingin memperbarui paket, pilih Ya

Sederhana saja

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)

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. .

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 :-)

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'

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.

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