GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 03/05/2018 | 00:00 GMT+7

Angular 6: Nâng cấp và tóm tắt các tính năng mới

Angular 6 , vừa được phát hành, và mặc dù số lượng tính năng mới là rất ít, nhưng đã có rất nhiều thay đổi về mặt công cụ. Các bổ sung công cụ mới đặc biệt tuyệt vời để tạo điều kiện nâng cấp và thêm thư viện mới vào ứng dụng của bạn. Trong bài đăng này, ta sẽ phân tích những gì mới với Angular 6 và cũng xem xét cách nâng cấp một ứng dụng lên version mới này.

Bổ sung & Tính năng mới

Dưới đây, bạn sẽ tìm thấy bản tóm tắt về các bổ sung mới chính. Lưu ý danh sách này không đầy đủ và bạn có thể tham khảo các liên kết trong phần kết luận để biết thêm chi tiết.

ng cập nhật & ng thêm

Angular CLI nhận được hai lệnh mới chính: cập nhật và thêm .

Với ng update , việc cập nhật ứng dụng Angular giờ đây chỉ là một lệnh. Các thư viện của bên thứ 3 cũng có thể kết nối vào lệnh mới, nhờ sơ đồ, để giúp dễ dàng cập nhật các thư viện đó. Bên dưới, lệnh sẽ hoạt động với file package.json của dự án và sử dụng trình quản lý gói của dự án (npm hoặc Yarn) cũng như áp dụng các chuyển đổi mã khi cần thiết để cập nhật mã hoặc file cấu hình khi cần thiết.

Tương tự như ng update , lệnh new ng add cho phép thêm và cấu hình các thư viện mới vào một dự án bằng một lệnh đơn giản. Ví dụ: cài đặt và cài đặt Angular Material trước đây yêu cầu khá nhiều bước, nhưng bây giờ tất cả có thể được thực hiện đơn giản với một lệnh:

$ ng add @angular/material

với ng add , các thư viện của bên thứ 3 có thể tạo sơ đồ riêng cho nó.

Các thay đổi CLI khác

Các dự án góc sử dụng CLI trước đây có một file cấu hình được gọi là .angular-cli.json . Với version 6 của CLI, file này hiện được đổi tên thành angle.json và cấu trúc của nó cũng thay đổi.

ng new bây giờ tạo một không gian làm việc với một ứng dụng mặc định. Các ứng dụng bổ sung có thể được thêm vào không gian làm việc, giúp có nhiều ứng dụng trong một dự án. Các thư viện giờ đây cũng là công dân hạng 1 và có thể được thêm vào không gian làm việc và được tạo bằng CLI:

$ ng g library ng-fancy-lib

Yếu tố góc

Với Angular 6, ta nhận được bản phát hành đầu tiên của Angular Elements , một dự án sẽ giúp dễ dàng phát triển các thành phần có thể được nhúng dưới dạngphần tử tùy chỉnh vào các dự án Angular khác và cuối cùng là với các khung công tác khác hoặc thậm chí chỉ với JavaScript đơn giản.

Ta sẽ xem xét Angular Elements trong một bài đăng khác và trong thời gian chờ đợi, bạn có thể xem phần giới thiệu tuyệt vời này của Jeff Delaney về Angular Firebase .

TypeScript 2.7 & RxJS 6

Angular 6 hiện phụ thuộc vào TypeScript 2.7 và RxJS 6.

RxJS 6 có các đường dẫn nhập mới và đơn giản hơn, đồng thời loại bỏ các toán tử có thể điều khiển thay vì các toán tử có thể phân phối. Điều này làm cho thư viện như một cây có thể lay chuyển toàn bộ hơn và sẽ dẫn đến các gói nhỏ hơn. RxJS 6 chứa một số thay đổi đột phá, nhưng một gói mới, rxjs-compat , có thể được cài đặt cùng với RxJS 6 để cung cấp lớp tương thích trong khi nâng cấp mã của bạn lên cú pháp mới.

Đây là một mẫu nhập minh họa các đường dẫn nhập mới chính:

// creation and utility methods
import { Observable, Subject, pipe } from 'rxjs';
// operators all come from `rxjs/operators`
import { map, takeUntil, tap } from 'rxjs/operators';

Như bạn thấy , việc nhớ nhập các thứ từ đâu sẽ dễ dàng hơn nhiều! Và đối với toán tử chuỗi so với toán tử có ống, đây là một ví dụ đơn giản về sự khác biệt:

// before
myObs
  .do(console.log)
  .map(x => x * 2)
  .subscribe(x => {
    console.log('Value is', x);
  });

// after
myObs
  .pipe(
    tap(console.log),
    map(x => x * 2)
  )
  .subscribe(x => {
    console.log('Value is', x);
  });

Thông báo như thế nào các nhà điều hành làm đã được đổi tên thành vòi, bởi vì do là một từ khóa dành riêng trong JavaScript.

Trình kết xuất Ivy

Một bản viết lại của trình kết xuất, có tên mã là Ivy , cũng đang được chú ý rất nhiều gần đây. Trình kết xuất mới phải nhỏ hơn đáng kể, điều này sẽ cho phép kích thước gói ứng dụng cuối cùng nhỏ hơn. Phiên bản ổn định vẫn chưa có sẵn, nhưng nó sẽ được cung cấp dưới dạng lựa chọn thay thế khi API hoàn chỉnh và ổn định.

Nâng cấp

Group Angular đã tập hợp một công cụ, Hướng dẫn cập nhật Angular , giúp dễ dàng di chuyển cài đặt Angular của bạn sang version mới nhất. Đối với hầu hết các phần, việc nâng cấp sẽ là vấn đề tuân theo hướng dẫn đó.

Tuy nhiên, bạn sẽ tìm thấy dưới đây là bảng phân tích tóm tắt về các bước cần thiết để nâng cấp một ứng dụng Angular 5.2 cũng sử dụng Angular Material lên Angular 6.

Trước khi bắt đầu, hãy đảm bảo ứng dụng của bạn đang sử dụng mô-đun HttpClient mới thay vì module Http cũ.

Nếu ứng dụng của bạn phụ thuộc vào các gói có peerDependency cho Angular 5, bạn sẽ phải đợi cho đến khi gói được cập nhật để hỗ trợ Angular 6.

Cập nhật CLI

Cập nhật lên v6 của Angular CLI cả global và local cho dự án:

# updating using npm
$ npm i -g @angular/cli
$ npm i @angular/cli

# using Yarn
$ yarn global add @angular/cli
$ yarn add @angular/cli

Đang chạy cập nhật

Đến đây bạn có thể chạy ng update cho CLI, Angular core và Angular Material.

Đầu tiên, cập nhật CLI sẽ chuyển đổi file cấu hình sang định dạng mới ( angle.json ) và cập nhật các cấu hình dự án khác nhau:

$ ng update @angular/cli

Tiếp theo, chạy ng update cho các gói lõi Angular:

$ ng update @angular/core

Và sau đó bạn cũng có thể chạy ng update để cập nhật Angular Material và RxJS:

$ ng update @angular/material
$ ng update rxjs

Chạy ng update mà không có đối số sẽ cung cấp cho bạn danh sách các gói có thể được cập nhật bằng lệnh.

Nâng cấp RxJS

Đối với RxJS, cú pháp cho các đường dẫn nhập cần được cập nhật và các toán tử cần được ghép nối với nhau thay vì chuỗi với nhau. Thông thường, điều đó nghĩa là bạn phải cập nhật mã của bạn ở mọi nơi sử dụng các toán tử và nhập khẩu RxJS, nhưng may mắn thay, có một gói xử lý hầu hết các công việc nặng nhọc: rxjs-tslint .

Bạn có thể cài đặt gói trên phạm vi global :

$ npm i -g rxjs-tslint

# or, using Yarn
$ yarn global add rxjs-tslint

Và sau đó, bạn có thể chạy lệnh rxjs-5-to-6-migrate trỏ đến file tsconfig.app.json của ứng dụng, được tìm thấy là folder src của dự án:

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

Bạn có thể phải chạy lệnh một vài lần. Trên một codebase không tầm thường, nhiều thay đổi sẽ được thực hiện, vì vậy bạn cần xem xét các khác biệt git đảm bảo rằng mọi thứ đều ổn.

Sau khi rxjs-tslint đã hoàn thành công việc của bạn , bạn cần chạy các thử nghiệm của bạn và thực hiện ứng dụng đầy đủ để khắc phục bất kỳ điều gì xuất hiện. Ví dụ, một số thay đổi cú pháp cho RxJS 6 có thể đã bị công cụ bỏ sót hoặc lỗi kiểu mới do TypeScript 2.7 đưa ra.

Sau khi mọi thứ có vẻ ổn, bạn cần xóa gói rxjs-compat khỏi dự án của bạn (để lại gói này sẽ thêm phần cồng kềnh không cần thiết vào gói ứng dụng của bạn):

$ npm uninstall rxjs-compat

# or, using Yarn
$ yarn remove rxjs-compat

Đọc thêm

Bạn có thể cần tìm hiểu sâu hơn về các bước bổ sung và di chuyển mới nhất. Dưới đây là một số tài nguyên chính để giúp bạn làm điều đó:

Tags:

Các tin liên quan