ฉันจะอัปเกรด angular 2 (npm) เป็นเวอร์ชันล่าสุดได้อย่างไร?

เมื่อเร็ว ๆ นี้ผมเริ่มเชิงมุม 2 กวดวิชาที่https://angular.io/docs/ts/latest/tutorial/

และออกจาก Angular 2 beta 8 ตอนนี้ฉันกลับมาใช้งานบทช่วยสอนและเบต้าล่าสุดคือเบต้า 14

หากฉันเพียงแค่อัปเดต npmเพียงไม่กี่โมดูล (ที่โหลดไว้ล่วงหน้าด้วยบทช่วยสอน) จะได้รับการอัปเดต แต่ไม่ใช่ Angular2 (ฉันเห็นสิ่งนั้นด้วยnpm ls )

ถ้าฉันอัปเดต npm angular 2หรือnpm update angular2@2.0.0beta.14มันก็ไม่ทำอะไรเลย

คำสั่งnpm update -D && npm update -Sจะอัปเดตทุกแพคเกจภายในpackage.jsonกับรุ่นล่าสุดของพวกเขาตามช่วงรุ่นที่กำหนดไว้ คุณสามารถอ่านเพิ่มเติมได้ที่นี่

หากคุณต้องการอัปเดต Angular จากเวอร์ชันก่อนหน้า2.0.0-rc.1คุณจะต้องแก้ไขด้วยตนเองpackage.jsonเนื่องจาก Angular ถูกแบ่งออกเป็นโมดูล npm หลายโมดูล หากไม่มีสิ่งนี้เนื่องจากแพ็คเกจangular2ชี้ไปที่2.0.0-beta.21คุณจะไม่ได้ใช้ Angular เวอร์ชันล่าสุด
รายการที่มีบางส่วนของโมดูลที่พบมากที่สุดที่คุณจะต้องเริ่มต้นที่สามารถพบได้ในพื้นที่เก็บข้อมูล QuickStart

หมายเหตุ:

• วิธีที่ยอดเยี่ยมในการอัปเดตเวอร์ชันล่าสุดของแพ็กเกจคือการใช้npm outdatedซึ่งจะแสดงแพ็กเกจที่ล้าสมัยทั้งหมดพร้อมกับเวอร์ชันที่ต้องการและเวอร์ชันล่าสุด

• เหตุผลที่เราต้องเชื่อมโยงคำสั่งสองคำสั่งnpm update -Dและnpm update -Sเอาชนะข้อบกพร่องนี้จนกว่าจะได้รับการแก้ไข

แพ็คเกจที่ดีอีกอย่างที่ฉันใช้สำหรับการย้ายจาก Angular2 Angular2 2.0.0 finalเป็นเวอร์ชันเบต้าคือnpm-check-updates

จะแสดงเวอร์ชันล่าสุดที่พร้อมใช้งานของแพ็คเกจทั้งหมดที่ระบุไว้ใน package.json ของคุณ ตรงกันข้ามกับnpm outdatedมันยังสามารถแก้ไข package.json ของคุณได้ซึ่งทำให้คุณสามารถทำในnpm upgradeภายหลังได้

ติดตั้ง

sudo npm install -g npm-check-updates

การใช้

ncuสำหรับการแสดงผล

ncu -u สำหรับการเขียน package.json ของคุณใหม่

อัปเกรดเป็น Angular 5 ล่าสุด

แพ็คเกจ Angular Dep: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

แพ็คเกจอื่น ๆ ที่ติดตั้งโดย angular cli npm install --save core-js@latest rxjs@latest zone.js@latest

แพ็คเกจ Angular Dev: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

ประเภทแพ็คเกจ Dev: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

แพ็คเกจอื่น ๆ ที่ติดตั้งเป็น dev dev โดย angular cli: 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

ติดตั้งเวอร์ชันที่รองรับล่าสุดที่ใช้โดย Angular cli (อย่าทำ @ ล่าสุด): npm install --save-dev typescript@2.4.2

เปลี่ยนชื่อไฟล์ angular-cli.json เป็น .angular-cli.json และอัปเดตเนื้อหา:

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

อัปเดต:
เริ่มจากCLI v6คุณสามารถเรียกใช้ng updateเพื่อให้การอ้างอิงของคุณอัปเดตเป็นเวอร์ชันใหม่โดยอัตโนมัติ

ในng updateบางครั้งคุณอาจต้องการเพิ่ม--forceค่าสถานะ หากคุณทำเช่นนั้นตรวจสอบให้แน่ใจว่าเวอร์ชันของ typescript ที่คุณติดตั้งด้วยวิธีนี้ได้รับการสนับสนุนโดยเวอร์ชันเชิงมุมปัจจุบันของคุณมิฉะนั้นคุณอาจต้องดาวน์เกรดเวอร์ชัน typescript

ดูคู่มือนี้ด้วยการอัปเดตโครงการเชิงมุมของคุณ

สำหรับผู้ใช้ทุบตีเท่านั้น

หากคุณเปิดอยู่Mac/Linuxหรือใช้งาน bash Windows(ซึ่งจะไม่ทำงานในค่าเริ่มต้นWindows CMD) คุณสามารถเรียกใช้ oneliner นั้นได้:

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

เพียงระบุเวอร์ชันที่คุณต้องการเช่น @ 4.4.5 หรือใส่ @latest เพื่อรับข้อมูลล่าสุด

ตรวจสอบของคุณpackage.jsonเพื่อให้แน่ใจว่าคุณกำลังอัปเดต@angular/*แพ็คเกจทั้งหมดที่คุณใช้แอพอยู่

• หากต้องการดู@angularเวอร์ชันที่แน่นอนในการดำเนินโครงการของคุณ:
  npm ls @angular/compilerหรือyarn list @angular/compiler
• ในการตรวจสอบ@angularเวอร์ชันเสถียรล่าสุดที่มีในการรัน npm:
  npm show @angular/compiler version

หน้า npm อย่างเป็นทางการแนะนำวิธีการที่มีโครงสร้างเพื่ออัปเดตเวอร์ชันเชิงมุมสำหรับสถานการณ์ทั้งส่วนกลางและในพื้นที่

1. ก่อนอื่นคุณต้องถอนการติดตั้งเชิงมุมปัจจุบันออกจากระบบของคุณ

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

2. ทำความสะอาดแคช

npm cache clean

แก้ไข

ตามที่ระบุไว้โดย @candidj

npm cache cleanเปลี่ยนชื่อเป็นnpm cache verifyตั้งแต่ npm 5 เป็นต้นไป

3. ติดตั้งเชิงมุมทั่วโลก

npm install -g @angular/cli@latest

4. การตั้งค่าโครงการในพื้นที่หากคุณมี

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

โปรดตรวจสอบสิ่งเดียวกันนี้ในลิงค์ด้านล่าง:

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

วิธีนี้จะแก้ปัญหาได้

แนวทางอื่นโดยใช้npm-upgrade :

1. npm i -g npm-upgrade

ไปที่โฟลเดอร์โครงการของคุณ

2. npm-upgrade check

ระบบจะถามคุณว่าคุณต้องการอัพเกรดแพ็คเกจหรือไม่ให้เลือกใช่

ง่ายมาก

หากคุณต้องการติดตั้ง / อัปเกรดแพ็คเกจทั้งหมดเป็นเวอร์ชันล่าสุดและคุณกำลังใช้งาน windows คุณสามารถใช้สิ่งนี้ได้ในpowershell.exe:

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

หากคุณใช้สิ่งcliนี้ด้วยคุณสามารถทำได้:

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'})";
}

สิ่งนี้จะบันทึกแพ็คเกจที่แน่นอน (-E) และแพ็คเกจ cli ในdevDependencies(-D)

เริ่มต้นที่นี่:

https://update.angular.io

เลือกเวอร์ชันที่คุณใช้และจะให้คำแนะนำทีละขั้นตอน

ขอแนะนำให้เลือก "ขั้นสูง" เพื่อดูขั้นตอนทั้งหมด ความซับซ้อนเป็นแนวคิดที่สัมพันธ์กัน - และฉันไม่รู้ว่าคุณลักษณะนี้เป็นความคิดที่โง่เขลาของใคร แต่ถ้าคุณเลือก 'พื้นฐาน' มันจะไม่แสดงขั้นตอนทั้งหมดที่จำเป็นและคุณอาจพลาดบางสิ่งที่สำคัญที่แอปพลิเคชัน 'พื้นฐาน' ของคุณใช้อยู่ .

ในเวอร์ชัน 6 มีคำสั่ง Angular CLI ใหม่ng updateซึ่งจะผ่านการอ้างอิงของคุณอย่างชาญฉลาดและทำการตรวจสอบเพื่อให้แน่ใจว่าคุณกำลังอัปเดตสิ่งที่ถูกต้อง :-)

ขั้นตอนจะสรุปวิธีการใช้งาน :-)

ถอนการติดตั้ง npm - บันทึก-dev angular-cli

npm ติดตั้ง - บันทึก-dev @ angular / cli @ ล่าสุด

ng ปรับปรุง @ เชิงมุม / cli

ng อัปเดต @ เชิงมุม / แกน - บังคับ

ng update @ angular / material หรือ npm i @ angular / cdk @ 6 @ angular / material @ 6 - บันทึก

npm ติดตั้ง typescript @ '> = 2.7.0 <2.8.0'

วิธีที่ดีที่สุดคือใช้ส่วนขยาย (pflannery.vscode-versionlens) ใน vscode

ซึ่งจะตรวจสอบความพึงพอใจทั้งหมดและตรวจสอบความเหมาะสมที่สุด

ฉันมีปัญหามากมายในการอัปเดตและรักษาหน่วยการทำงานของแอปของฉันฉันปล่อยให้ verbose lense ทำการตรวจสอบแล้วฉันก็เรียกใช้

npm ผม

เพื่อติดตั้งการอ้างอิงที่แนะนำใหม่

หากคุณกำลังมองหาฉันเพียงแค่อัปเดตโครงการของคุณเป็นรุ่นล่าสุดสิ่งเหล่านี้คือสิ่งที่ใช้ได้ผลกับฉันตั้งแต่ Angular 6:

เปิดคอนโซลในโฟลเดอร์โครงการของคุณ: If you type: ng updateจากนั้นคุณจะได้รับข้อความด้านล่าง:

        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.

ดังนั้นฉันมักจะตรงไปและทำ:

ng update --all

ในที่สุดคุณก็สามารถตรวจสอบเวอร์ชันใหม่ของคุณได้:

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