GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 29/05/2019 | 00:00 GMT+7

Angular 8: Nâng cấp & Tóm tắt các tính năng mới

Angular 8 đã đến với một loạt các cải tiến về quy trình làm việc và hiệu suất. Giống như ta đã làm cho một vài bản phát hành trước , hãy xem xét những gì mới với Angular 8 cũng như cách nâng cấp các ứng dụng Angular 7 của bạn lên Angular 8.

Điểm nổi bật của bản phát hành Angular 8

Tôi muốn nói rằng số lượng các tính năng mới rõ ràng trong Angular 8 bị hạn chế, nhưng thực sự vẫn có một số tính năng tốt:

Tải khác biệt

Ứng dụng Angular 8 của bạn giờ đây sẽ tự động hoạt động hiệu quả hơn nhờ tải khác biệt.

Với tải khác biệt, hai gói được tạo khi xây dựng để production : một gói dành cho các trình duyệt hiện đại hỗ trợ ES2015 + và một gói dành cho các trình duyệt cũ hơn chỉ hỗ trợ version ES5 của JavaScript. Gói chính xác sẽ được trình duyệt tự động tải, nhờ sự hỗ trợ của các module ES6 trong các trình duyệt mới hơn .

Tính năng mới này dẫn đến cải tiến hiệu suất đơn lẻ lớn nhất cho Angular v8. Các trình duyệt mới hơn sẽ có thể tải ít mã hơn và tải một lượng polyfills nhỏ hơn nhiều.

Bạn không phải làm bất cứ điều gì đặc biệt để được hưởng lợi từ việc tải vi sai, lệnh ng build với cờ --prod sẽ đảm nhiệm việc đóng gói mọi thứ để tải vi phân hoạt động hiệu quả:

$ ng build --prod

Nhập động cho các tuyến đường lười biếng

Các tuyến được tải chậm hiện sử dụng cú pháp nhập động tiêu chuẩn thay vì một chuỗi tùy chỉnh. Điều này nghĩa là TypeScript và linters sẽ có thể khiếu nại tốt hơn khi các module bị thiếu hoặc sai chính tả.

Vì vậy, một quá trình nhập được tải chậm trông như thế này:

{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }

Bây giờ sẽ trông như thế này:

{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }

Sự thay đổi trong cú pháp sẽ được đưa về chăm sóc cho bạn nếu bạn đang sử dụng ng upgrade lệnh để nâng cấp ứng dụng của bạn.

Cải tiến quy trình làm việc CLI

CLI đang tiếp tục được cải thiện và giờ đây việc ng build , ng test và ng run được trang bị để mở rộng bởi các thư viện và công cụ của bên thứ ba. Ví dụ, AngularFire đã sử dụng các khả năng mới này bằng lệnh deploy .

Còn Ivy và Bazel thì sao?

Ta sẽ phải đợi thêm một chút nữa để Ivy , công cụ kết xuất mới và Bazel , hệ thống xây dựng mới, sẵn sàng sử dụng chính thức với Angular. Bản xem trước chọn tham gia của cả hai sẽ sớm có sẵn.

Nâng cấp từ Angular 7 lên Angular 8

Như trường hợp của một vài bản phát hành trước đó, việc nâng cấp một ứng dụng từ Angular 7 lên Angular 8 thật dễ dàng. Điều đó đặc biệt đúng nếu bạn đã chuyển sang sử dụng HttpClient mới và sang RxJS 6 .

Trong trường hợp đơn giản nhất, bạn chỉ có một lệnh để chạy để nâng cấp lên Angular 8:

$ ng update @angular/cli @angular/core

Với lệnh đó, quá trình nhập định tuyến được tải chậm của bạn sẽ được tự động chuyển sang cú pháp nhập mới.

Một số điều cần lưu ý về quá trình nâng cấp:

  • Một số lỗi cú pháp mới có thể xuất hiện. Đó là do Angular hiện đang sử dụng TypeScript 3.4, điều này có thể làm xuất hiện một số vấn đề chưa được đánh dấu trước đây.
  • Bạn cần đảm bảo mình đang sử dụng Node.js version 12 trở lên. Bạn có thể kiểm tra version Node bạn đang sử dụng bằng cách chạy $ node -v . Và nếu bạn cần tải version mới nhất, chỉ cần truy cập trang download chính thức cho Node.

Nâng cấp vật liệu góc

Nếu ứng dụng của bạn sử dụng Angular Material, bạn cần làm theo lệnh sau:

$ ng update @angular/material

Lệnh này cũng sẽ xử lý việc thay đổi các lần nhập thành phần Angular Material của bạn thành từng thành phần cụ thể thay vì nhập từ global @angular/material .

Nếu bạn đang cố gắng nâng cấp từ version khác với Angular 7, bạn có thể sử dụng hướng dẫn nâng cấp Angular chính thức để biết hướng dẫn về cách tiếp tục.

Học nhiều hơn nữa

Tags:

Các tin liên quan