เนื่องจาก Angular 6 อยู่ที่นี่ฉันต้องการอัปเกรดหรือย้ายแอปพลิเคชันไคลเอนต์ angular 5 ไปยัง angular 6 แต่ฉันไม่ได้รับบทช่วยสอนหรืออะไรก็ตามที่สามารถแนะนำฉันได้

ตามฉันฉันต้องเรียกใช้ Angular CLI ใหม่จากนั้นต้องย้ายซอร์สเก่าของฉันไปยังโปรเจ็กต์ใหม่ ฉันอ่าน Angular 6 กำลังใช้ตัวแสดงภาพใหม่ที่เรียกว่า Ivy จะต้องเปลี่ยนโครงการตาม Ivy หรือไม่?

อัปเกรดจาก Angular v6 เป็น Angular v7

รุ่นที่ 7ของเชิงมุมได้รับการเผยแพร่อย่างเป็นทางการของการเชื่อมโยงบล็อกเชิงมุม ไปที่คู่มือการอัปเดตเชิงมุมอย่างเป็นทางการhttps://update.angular.ioสำหรับข้อมูลโดยละเอียด ขั้นตอนเหล่านี้จะใช้ได้กับแอพเชิงมุมพื้นฐาน 6 แอพโดยใช้ Angular Material

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

อัปเกรดจาก Angular v5 เป็น Angular v6

รุ่น 6ของเชิงมุมได้รับการเผยแพร่อย่างเป็นทางการของการเชื่อมโยงบล็อกเชิงมุม ผมได้กล่าวถึงการปรับรุ่นทั่วไปตามขั้นตอนด้านล่าง แต่ก่อนและหลังการปรับปรุงที่คุณจำเป็นต้องทำการเปลี่ยนแปลงในรหัสของคุณที่จะทำให้มันใช้การได้ใน v6 เพื่อที่การเยี่ยมชมข้อมูลรายละเอียดเว็บไซต์อย่างเป็นทางการhttps://update.angular.io

ขั้นตอนการอัปเกรด (ส่วนใหญ่นำมาจากคู่มือการอัปเดตเชิงมุมอย่างเป็นทางการสำหรับแอป Angular พื้นฐานโดยใช้วัสดุเชิงมุม):

1. ตรวจสอบให้แน่ใจว่าเวอร์ชัน NodeJS เป็น 8.9+ หากไม่อัปเดต

2. อัปเดต Angular cli ทั่วโลกและแบบโลคัลและโอนย้ายการกำหนดค่าแบบเก่า . angular-cli.jsonไปเป็นรูปแบบangular.jsonใหม่โดยเรียกใช้สิ่งต่อไปนี้:

   npm install -g @angular/cli  
   npm install @angular/cli  
   ng update @angular/cli
   

3. อัปเดตแพ็คเกจ Angular framework ทั้งหมดของคุณเป็น v6 และเวอร์ชันที่ถูกต้องของ RxJS และ TypeScript โดยรันสิ่งต่อไปนี้:

   ng update @angular/core
   

4. อัปเดต Angular Material เป็นเวอร์ชันล่าสุดโดยเรียกใช้สิ่งต่อไปนี้:

   ng update @angular/material
   

5. RxJS v6 มีการเปลี่ยนแปลงที่สำคัญจาก v5 โดย v6 นำแพคเกจความเข้ากันได้แบบย้อนกลับที่เข้ากันได้กับ rxjs ซึ่งจะทำให้แอปพลิเคชันของคุณทำงานได้ แต่คุณควร refactor โค้ด TypeScript เพื่อไม่ให้ขึ้นอยู่กับ rxjs-compat ในการ refactor โค้ด TypeScript ให้รันดังต่อไปนี้:

   npm install -g rxjs-tslint   
   rxjs-5-to-6-migrate -p src/tsconfig.app.json
   

   หมายเหตุ: เมื่อการอ้างอิงทั้งหมดของคุณอัปเดตเป็น RxJS 6 แล้วให้ลบ rxjs- compat ออกเนื่องจากเพิ่มขนาดกลุ่ม โปรดดูคู่มือการอัปเกรด RxJSสำหรับข้อมูลเพิ่มเติม

   npm uninstall rxjs-compat
   

6. เสร็จสิ้นng serveเพื่อตรวจสอบ
   หากคุณได้รับข้อผิดพลาดในการสร้างโปรดดูที่https://update.angular.ioสำหรับข้อมูลโดยละเอียด

อัปเกรดจาก Angular v5 เป็น Angular 6.0.0-rc.5

1. อัปเกรด rxjs เป็น 6.0.0-beta.0 โปรดดูคู่มือการอัปเกรด RxJSสำหรับข้อมูลเพิ่มเติม RxJS v6 ได้ทำลายการเปลี่ยนแปลงดังนั้นอันดับแรกให้รหัสของคุณเข้ากันได้กับ RxJS เวอร์ชันล่าสุด

2. อัปเดตเวอร์ชัน NodeJS เป็น 8.9+ (สิ่งนี้จำเป็นสำหรับเวอร์ชัน angular cli 6)

3. อัปเดตแพ็คเกจส่วนกลางของ Angular cli เป็นเวอร์ชันถัดไป

   npm uninstall -g @angular/cli
   npm cache verify
   

   หากเวอร์ชัน npm เป็น <5 ให้ใช้ npm cache clean

   npm install -g @angular/cli@next
   

4. เปลี่ยนเวอร์ชันแพ็กเกจเชิงมุมในไฟล์ package.json เป็น ^6.0.0-rc.5

   "dependencies": {
     "@angular/animations": "^6.0.0-rc.5",
     "@angular/cdk": "^6.0.0-rc.12",
     "@angular/common": "^6.0.0-rc.5",
     "@angular/compiler": "^6.0.0-rc.5",
     "@angular/core": "^6.0.0-rc.5",
     "@angular/forms": "^6.0.0-rc.5",
     "@angular/http": "^6.0.0-rc.5",
     "@angular/material": "^6.0.0-rc.12",
     "@angular/platform-browser": "^6.0.0-rc.5",
     "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
     "@angular/router": "^6.0.0-rc.5",
     "core-js": "^2.5.5",
     "karma-jasmine": "^1.1.1",
     "rxjs": "^6.0.0-uncanny-rc.7",
     "rxjs-compat": "^6.0.0-uncanny-rc.7",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.5.0",
     "@angular/cli": "^6.0.0-rc.5",
     "@angular/compiler-cli": "^6.0.0-rc.5",
     "@types/jasmine": "2.5.38",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.1.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "postcss-loader": "^2.1.4",
     "protractor": "~5.1.0",
     "ts-node": "~5.0.0",
     "tslint": "~5.9.1",
     "typescript": "^2.7.2"
   }
   

5. ถัดไปอัปเดตแพ็คเกจท้องถิ่น Angular cli เป็นเวอร์ชันถัดไปและติดตั้งแพ็คเกจที่กล่าวถึงข้างต้น

   rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
   Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
   npm install --save-dev @angular/cli@next
   npm install 
   

6. รูปแบบคอนฟิกูเรชัน Angular CLI ถูกเปลี่ยนจากเวอร์ชัน angular cli 6.0.0-rc.2 และการกำหนดค่าที่มีอยู่ของคุณสามารถอัปเดตโดยอัตโนมัติโดยรันคำสั่งต่อไปนี้ มันจะลบไฟล์ config เก่า . angular-cli.jsonและจะเขียนไฟล์angular.jsonใหม่

   ng update @angular/cli --migrate-only --from=1.7.4

หมายเหตุ: - หากคุณได้รับข้อผิดพลาดต่อไปนี้ "The Angular Compiler ต้องใช้ TypeScript> = 2.7.2 และ <2.8.0 แต่พบ 2.8.3 แทน" รันคำสั่งต่อไปนี้:

npm install typescript@2.7.2

Angular 6 เพิ่งเปิดตัว

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

นี่คือสิ่งที่ใช้ได้ผลกับโครงการเล็ก ๆ ของฉัน

1. npm ติดตั้ง -g @ angular / cli
2. npm ติดตั้ง @ angular / cli
3. ng update @ angular / cli --migrate-only - จาก = 1.7.0
4. ng ปรับปรุง @ เชิงมุม / แกน
5. npm ติดตั้ง rxjs-compat
6. ng ให้บริการ

คุณอาจต้องอัพเดตสคริปต์การรันของคุณใน package.json For eg หากคุณใช้แฟล็กเช่น "app" และ "environment" สิ่งเหล่านี้ได้รับการอัปเดตเป็น "project" และ "configuration" ตามลำดับ

อ้างอิงhttps://update.angular.io/สำหรับคำแนะนำโดยละเอียดเพิ่มเติม

เพียงใช้คู่มือการอัปเกรดอย่างเป็นทางการซึ่งจะบอกคุณว่าคุณต้องทำอะไรเพื่อความต้องการเฉพาะของคุณเอง:

https://update.angular.io/

ตรวจสอบรายละเอียดการอัปเกรดทีละขั้นตอนจาก Angular 5 เป็น Angular 6 สิ่งเหล่านี้ให้รายละเอียดเกี่ยวกับปัญหาที่คุณพบระหว่างการอัปเกรดและวิธีแก้ไข

• อัปเดตเวอร์ชันโหนดของคุณเป็น 8 ขึ้นไปและติดตั้ง Angular cli ล่าสุดทั่วโลกโดย npm i -g @ angular / cli @ latest
• Angular 6 ใช้ angular.json เป็นไฟล์คอนฟิกูเรชันแทน .anguar-cli.json นอกจากนี้ยังมีการเปลี่ยนแปลง tslint ตรวจสอบhttps://github.com/angular/angular-cli/wiki/angular-workspaceสำหรับรายละเอียดการกำหนดค่าล่าสุด คุณต้องย้ายการกำหนดค่าที่มีอยู่ไปยังไฟล์กำหนดค่าใหม่
• ในการดำเนินการนี้ให้สร้างโปรเจ็กต์ดัมมี่อื่นที่มี cli ล่าสุดโดยใช้ 'your-project' ใหม่และค่าเริ่มต้นเดียวกันเช่นคำนำหน้าสไตล์ ฯลฯ ที่คุณใช้ก่อนหน้านี้สำหรับโปรเจ็กต์ของคุณ สร้างโปรเจ็กต์ใหม่ด้วย cli https://github.com/angular/angular-cli/wiki/new
• ใช้ https://update.angular.io/เพื่อตรวจสอบสิ่งที่เปลี่ยนแปลงไปจาก Angular → Angular 6 เวอร์ชันปัจจุบันของคุณซึ่งให้การใช้งานวิธีการเปลี่ยนแปลง / แก้ไข
• ทำตามขั้นตอนด้านบนและคัดลอก / อัพเดตไฟล์ angular.json ที่สร้างในขั้นตอนที่ 2 ทำ npm i ในโปรเจ็กต์ของคุณเพื่อรับการอ้างอิงทั้งหมดและทำการอัปเดต npm
• ตอนนี้มาถึงส่วนใหญ่ RxJS อัพเกรดและแก้ไขข้อขัดแย้ง RxJS ได้กำหนดมาตรฐานการนำเข้าของโอเปอเรเตอร์และผู้สร้างที่สังเกตได้ด้วยรุ่นนี้ ทำ npm i -g rxjs-tslint และเพิ่มด้านล่าง lint configuration ใน tslint.json

{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}

• ตอนนี้เรียกใช้ ng lint --fix วิธีนี้แก้ไขบางรายการ แต่ปัญหาที่เหลือส่วนใหญ่จะถูกเน้นและคุณต้องแก้ไขด้วยตนเอง

การเปลี่ยนชื่อผู้ปฏิบัติงาน:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

ตัวดำเนินการทั้งหมดย้ายไปที่ rxjs / operator

import { map, filter, reduce } from 'rxjs/operators';

วิธีการสร้างที่สังเกตได้จะย้ายไปที่ rxjs

   import { Observable, Subject, of, from } from 'rxjs'; 

คุณพร้อมแล้ว ยินดีต้อนรับสู่ Angular 6 :) ตรวจสอบโพสต์บล็อกของฉันที่นี่เกี่ยวกับวิธีการอัปเกรด

ฉันต้องรันng update @ angular / cli อีกครั้งเพื่อให้ angular-cli.json เปลี่ยนเป็น angular.json

โปรดเรียกใช้ความคิดเห็นด้านล่างเพื่ออัปเดตเป็น Angular 6 จาก Angular 5

1. ng ปรับปรุง @ เชิงมุม / cli
2. ng ปรับปรุง @ เชิงมุม / แกน
3. npm ติดตั้ง rxjs-compat (เพื่อรองรับเวอร์ชันเก่า rxjs 5.6)
4. npm install -g rxjs-tslint (หากต้องการเปลี่ยนจากรูปแบบ rxjs 5 เป็น rxjs 6 ในโค้ดติดตั้งทั่วโลกจากนั้นจะทำงานเท่านั้น)
5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (หลังจากติดตั้งเราต้องเปลี่ยนในซอร์สโค้ดเป็นรูปแบบ rxjs6)
6. npm ถอนการติดตั้ง rxjs-compat (ลบในที่สุด)

คู่มือฉบับสมบูรณ์

----------------- ด้วย angular-cli --------------------------

1. อัปเดต CLI ทั่วโลกและในประเทศ

1. ใช้ NPM (ตรวจสอบให้แน่ใจว่าคุณมีโหนดเวอร์ชัน 8+)

   npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

2. การใช้เส้นด้าย

   yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. อัปเดตการอ้างอิง

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

ตอนนี้ Angular 6 ขึ้นอยู่กับ TypeScript 2.7 และ RxJS 6

โดยปกตินั่นหมายความว่าคุณต้องอัปเดตรหัสของคุณทุกที่ที่มีการนำเข้าและตัวดำเนินการ RxJS แต่โชคดีที่มีแพ็คเกจที่ดูแลการยกของหนักส่วนใหญ่:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

จากนั้นคุณสามารถเรียกใช้ rxjs-5-to-6-migrate

rxjs-5-to-6-migrate -p src/tsconfig.app.json

ในที่สุดก็ลบ rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

อ้างอิงลิงค์นี้https://alligator.io/angular/angular-6/

------------------- ไม่มีมุม -cli -------------------------

ดังนั้นคุณต้องอัปเดตpackage.jsonไฟล์ของคุณด้วยตนเอง

จากนั้นเรียกใช้

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json

ดังที่ Vinay Kumar ชี้ให้เห็นว่าจะไม่อัปเดต Angular CLI ที่ติดตั้งทั่วโลก หากต้องการอัปเดตทั่วโลกเพียงใช้คำสั่งต่อไปนี้:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

หมายเหตุหากคุณต้องการอัปเดตโปรเจ็กต์ที่มีอยู่คุณต้องแก้ไขโปรเจ็กต์ที่มีอยู่คุณควรเปลี่ยนpackage.jsonภายในโปรเจ็กต์ของคุณ

ไม่มีการเปลี่ยนแปลงใด ๆ ใน Angular แต่อยู่ใน RxJS ดังนั้นอย่าลืมใช้ไลบรารีที่เข้ากันได้กับ rxjs เพื่อทำงานกับรหัสเดิม

  npm install --save rxjs-compat  

ฉันเขียนบทความดีๆเกี่ยวกับการติดตั้ง / อัปเดต Angular CLI http://bmnteam.com/angular-cli-installation/

เพียงแค่เรียกใช้คำสั่งต่อไปนี้:

ng update

หมายเหตุ: สิ่งนี้จะไม่อัปเดตทั่วโลก

นี่คือวิธีที่ฉันทำให้มันได้ผล

สภาพแวดล้อมของฉัน:

Angular CLI Global: 6.0.0, Local: 1.7.4, Angular: 5.2, typescript 2.5.3

หมายเหตุ: ในการเปิดใช้งานng Updateคุณต้องติดตั้ง Angular CLI 6.0 ก่อน npm install -g @angular/cli or npm install @angular/cli

1. ng update //update Angular Package core/common/complier... to 6.0.0

2. ng update @angular/cli //change angular-cli.json to angular.json

เป็นทางเลือกถ้าคุณมีวัสดุเชิงมุม 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

3. ng update @angular/material //upgrade to 6.0.1

4. npm install @ngx-translate/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //for ng-bootstrap

หากคุณใช้ Observable และได้รับข้อผิดพลาด:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

เปลี่ยนแปลง: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

ถึง

import { Observable, of } from "rxjs";

ปัญหา Angular CLI: https://github.com/angular/angular-cli/issues/10621

มีไม่กี่ขั้นตอนในการอัปเกรด 2/4/5 เป็น Angular 6

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

ในการแก้ไขปัญหาที่เกี่ยวข้องกับ "angular.json": -

ng update @angular/cli --migrate-only --from=1.7.4

การโยกย้ายร้านค้า
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

การโยกย้าย RXJS
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

หวังว่านี่จะช่วยคุณได้ :)