Kiểm tra chi tiết nâng cấp từng bước từ Angular 5 lên Angular 6. Những điều này cung cấp chi tiết về các vấn đề bạn gặp phải trong quá trình nâng cấp và cách giải quyết chúng.
- Cập nhật phiên bản nút của bạn lên 8 hoặc cao hơn và Cài đặt Angular cli mới nhất trên toàn cầu trước npm i -g @ angle / cli @ mới nhất.
- Angular 6 sử dụng angle.json làm tệp cấu hình thay vì .anguar-cli.json. Ngoài ra tslint đã được thay đổi. Kiểm tra https://github.com/angular/angular-cli/wiki/angular-workspace để biết chi tiết cấu hình mới nhất. Bạn phải di chuyển bất kỳ cấu hình hiện có nào của mình sang tệp cấu hình mới.
- Để thực hiện việc này, hãy tạo một dự án giả khác với cli mới nhất bằng cách sử dụng 'dự án của bạn' mới và cùng các giá trị mặc định như tiền tố, kiểu, v.v. bạn đã sử dụng trước đó cho dự án của mình. Tạo dự án mới với cli
https://github.com/angular/angular-cli/wiki/new
- Sử dụng
https://update.angular.io/ để kiểm tra những gì đã được thay đổi từ phiên bản Angular → Angular 6. Nó cung cấp cách sử dụng để thay đổi / sửa chữa chúng.
- Làm theo các bước ở trên và sao chép / cập nhật tệp angle.json được tạo ở bước 2. Thực hiện npm i trong dự án của bạn để nhận tất cả các phụ thuộc và cập nhật npm
- Bây giờ đến phần lớn. Nâng cấp RxJS và giải quyết xung đột. RxJS đã tiêu chuẩn hóa việc nhập các nhà khai thác và người tạo có thể quan sát với bản phát hành này. Thực hiện npm i -g rxjs-tslint và thêm cấu hình lint bên dưới trong 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
}
}
- Bây giờ chạy ng lint --fix. Điều này khắc phục được một số mục nhưng hầu hết các vấn đề còn lại sẽ được đánh dấu và bạn phải khắc phục nó theo cách thủ công.
Thay đổi tên nhà điều hành:
do -> tap,
catch -> catchError,
switch -> switchAll,
finally -> finalize
Tất cả các toán tử được chuyển sang rxjs / operator
import { map, filter, reduce } from 'rxjs/operators';
Các phương thức tạo có thể quan sát được chuyển sang rxjs
import { Observable, Subject, of, from } from 'rxjs';
Bạn đã sẵn sàng. Chào mừng bạn đến với Angular 6 :)
Kiểm tra bài đăng trên blog của tôi ở đây về cách nâng cấp
