12 C
Hanoi
Thứ Tư, Tháng Hai 28, 2024

Những nâng cấp trên Angular 11

NEWSNhững nâng cấp trên Angular 11

Hiện tại Google đã phát hành phiên bản Angular 11.0.0 vào tháng 11 năm 2020. Bản update này cung cấp các bản cập nhật trên toàn bộ nền tảng, bao gồm framework, CLI và các components. Nào chúng ta cùng đi sâu vào để tìm hiểu xem có gì mới trong phiên bản này

Faster Builds

Điều đầu tiên Angular luôn làm với các phiên bản mới là cam kết tối ưu hóa tốc độ. Trong phiên bản mới này, Angular thậm chí còn nhanh hơn bạn biết, từ giai đoạn phát triển cho đến cả chu trình build.

Điều này có thể thực hiện được thông qua một số thay đổi và cập nhật về những thứ như trình biên dịch, hiện sử dụng TypeScript 4.0 và các quy trình nhanh hơn như cập nhật ngcc, hiện nhanh hơn tới bốn lần so với phiên bản trước đó.

Cập nhật Angular ESLint

Ở trước phiên bản mới này, Angular luôn triển khai linting với TSLint theo mặc định, nhưng TSLint hiện không được chấp nhận bởi các nhà sáng tạo, và khuyên bạn nên chuyển sang ES Lint hoàn toàn.

Với sự trợ giúp của rất nhiều thành viên cộng đồng Angular cùng với James Henry. Một đường dẫn di chuyển của bên thứ ba đã được xây dựng với stylescript-eslint, angle-eslinttslint-to-eslint-config và điều này đã được kiểm tra để đảm bảo sự chuyển đổi suôn sẻ cho các nhà phát triển Angular. Vì vậy, trong tương lai, việc sử dụng TSLint và thậm chí cả Codelyzer đã không còn được dùng nữa, nghĩa là triển khai Angular mặc định cho linting sẽ không còn nữa nhưng bạn vẫn có thể kết hợp angular-eslint trong một dự án và migrate từ TSLint.

Bạn có thể đọc thêm ở đây.

Cập nhật với Internet Explorer

Phiên bản mới này cũng sẽ loại bỏ tất cả hỗ trợ cho các phiên bản cũ của Internet Explorer phiên bản 9 và 10 và thậm chí cả trên phiên bản di động. Phiên bản IE duy nhất hiện vẫn được hỗ trợ là 11 và các API không dùng nữa cũng đã bị xóa.

Hỗ trợ Webpack 5

Phiên bản mới này đi kèm hỗ trợ với webpack phiên bản thử nghiệm. Điều đó có nghĩa là bạn có thể chọn sử dụng phiên bản thứ 5 của webpack trong các dự án của mình về sau. Angular có kế hoạch dẫn đầu con đường này và cho phép xây dựng nhanh hơn với bộ nhớ đệm thực sự bền bỉ của đĩa và thậm chí kích thước gói nhỏ hơn với cjs tree-shaking. Hãy nhớ rằng đây vẫn là thử nghiệm, vì vậy không sử dụng nó trong môi trường production. Bạn có thể sử dụng nó để thử bằng cách kích hoạt nó bên trong dự án mới của bạn bằng cách thêm dòng này bên dưới vào tệp package.json của bạn:

"resolutions": {
     "webpack": "5.4.0"
}

Chú ý rằng bạn phải sử dụng yarn thay vì npm.

Cải thiện Logging và Reporting

Phiên bản Angular mới này cũng có những thay đổi mới trong cách báo cáo được thực hiện trên giai đoạn build trong quá trình phát triển. Các thay đổi mới hiện đã được thực hiện trên CLI để làm cho logs và thậm chí các báo cáo thường dễ đọc:

>ng build --prod

? Browser application bundle generation complete.
? Copying assets complete.
? Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.67369a137e02816722b6.js   | main          	| 213.08 kB
polyfills.bf99d438b005d57b2b31.js | polyfills		|  36.00 kB
runtime.359d5ee4682f20e936e9.js | runtime       	|   1.45 kB
styles.09e2c710755c8867a460.css  | styles        	|   0 bytes

                                  | Initial Total | 250.53 kB

Build at: 2020-12-01T04:45:59.463Z - Hash: d633afb7245175d2bf60 - Time: 34869ms

Updated Language Service Preview

Dịch vụ ngôn ngữ Angular được sử dụng trước đây để cung cấp các công cụ giúp việc xây dựng với Angular trở nên thú vị dựa trên view engine. Bây giờ Ivy là chủ đạo, nhóm muốn bạn xem trước về cách mọi thứ sẽ hoạt động với một công cụ và trình kết xuất tốt hơn. Điều này mang lại cho bạn trải nghiệm Angular tốt nhất và nó sẽ có thể suy ra các kiểu chung bên trong các template của bạn giống như trình biên dịch TypeScript sẽ làm.

Hot Module Replacement(HMR) Support

Trên phiên bản Angular 11, đã cập nhật CLI để cho phép bật tính năng Hot Module Replacement (HMR) khi start ứng dụng. HMR cho phép thay thế các mô-đun mà không cần làm mới trình duyệt. Để kích hoạt HMR, ta chạy lệnh sau để khởi chạy ứng dụng:

ng serve --hmr

Sau khi ứng dụng của bạn chạy, bạn sẽ thấy thông báo xác nhận cho biết HMR đang hoạt động. Bạn cũng nên nhớ nó chỉ có sẵn trên môi trường phát triển. Vì vậy, khi bạn xây dựng, bạn sẽ bắt đầu thấy những thay đổi mới nhất đối với các components, templates và thậm chí cả styles của bạn cập nhật ngay lập tức khi bạn chạy ứng dụng mà không cần làm mới trang thực tế nào cả.

>ng serve --hmr
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.
? Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js          | vendor      |   2.66 MB
polyfills.js          | polyfills	  | 484.95 kB
styles.css, styles.js 	| styles          | 350.57 kB
main.js            | main          |  60.88 kB
runtime.js         | runtime        |  33.44 kB

                      | Initial Total |   3.57 MB

Build at: 2020-12-01T07:20:29.835Z - Hash: 4c8934a81ed952e948e6 - Time: 9147ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


? Compiled successfully.

Bạn có thể đọc thêm ở đây.

Automatic Font Inlining

Trong Angular 11, phông chữ có thể được chuyển đổi thành inline trong index.html. Bạn có thể đặt cờ trong angular.json của mình trong tùy chọn build. Theo mặc định, tính năng này được bật trong cấu hình production.

Khi bạn chạy ng serve, Angular tải xuống các phông chữ nội tuyến được sử dụng hoặc liên kết với dự án của bạn, cung cấp thời gian tải nhanh hơn.

Component Test Harnesses

Với Angular 9, component test harness cung cấp một cơ sở API có thể đọc được và mạnh mẽ để kiểm tra các Angular material components với API được hỗ trợ khi test. Với phiên bản 11 mới này, giờ đây chúng tôi đã có harnesses cho tất cả các components, vì vậy các nhà phát triển thậm chí có thể xây dựng nhiều bộ thử nghiệm hơn nữa.

Điều này đi kèm với rất nhiều bản cập nhật, cải tiến hiệu suất và thậm chí cả các API mới. Giờ đây, chức năng song song giúp xử lý các hành động không đồng bộ bên trong các bộ test sẽ dễ dàng hơn vì bạn có thể chạy song song nhiều tương tác không đồng bộ với các thành phần của mình. Một chức năng như phát hiện thay đổi thủ công giờ đây sẽ cung cấp cho bạn quyền truy cập vào khả năng kiểm soát phát hiện tốt hơn bằng cách chỉ tắt tính năng phát hiện thay đổi tự động bên trong các bài kiểm tra đơn vị của bạn. Bạn có thể đọc thêm ở đây.

Update lên version 11

Để update lên phiên bản 11, đơn giản ta chỉ cần chạy lệnh sau:

ng update @angular/cli @angular/core

Sau khi hoàn thành, bạn có thể kiểm tra lại phiên bản hiện tại của ứng dụng đã được update lên version 11:

>ng version

Angular CLI: 11.0.2
Node: 14.15.1
OS: win32 x64

Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.2
@angular-devkit/build-angular   0.1100.2
@angular-devkit/core            11.0.2
@angular-devkit/schematics      11.0.2
@schematics/angular             11.0.2
@schematics/update              0.1100.2
rxjs                            6.6.3
typescript                      4.0.5

Thank you!

Tài liệu tham khảo

https://www.telerik.com/blogs/whats-new-angular-11

https://angular.io/

https://angular.io/guide/updating-to-version-11

BÀI VIẾT MỚI

Cách đăng ký sim giá rẻ LINEMO (LINE) – Mới Nhất

Giới thiệu: Nhà mạng Linemo được đổi tên từ nhà...

Hướng dẫn kiếm tiền từ Google AdSense mới nhất!

Google AdSense là gì? Kiếm tiền online là một từ...

Địa điểm ngắm lá đỏ đẹp nhất ở KANTO- Nhật Bản.

Ai đã từng đặt chân đến Nhật Bản, chắc...

QUẦY TƯ VẤN CHO NGƯỜI NƯỚC NGOÀI TẠI NHẬT BẢN MIỄN PHÍ

Quầy tư vấn cho người nước ngoài tại Nhật...

Tổng hợp sim giá rẻ ở Nhật Bản

Hôm nay mình xin giới thiệu đến các bạn...

Hướng dẫn đăng ký tài khoản Rakuten.

Mục đích đăng ký tài khoản rakuten: Tài khoản rakuten...

Hướng dẫn thủ tục xin miễn giảm thuế cuối năm khi làm việc tại Nhật Bản (Điều chỉnh tiền thuế cuối năm).

Hai khoản thuế này đáng nhẽ ra là từng cá nhân sẽ phải tự kê khai và nộp cho cơ quan thuế, tuy nhiên, đối với các bạn đang đi làm tại các công ty thì thường bộ phận hành chính của công ty sẽ đại diện cho nhân viên của công ty làm các thủ tục thay cho tất cả nhân viên trong đó có bạn.

Dân số Nhật Bản giảm kỷ lục trong 13 năm liên tiếp.

Theo dữ liệu chính thức từ chính phủ Nhật...

7 lễ hội mùa hè Nhật Bản bạn nhất định phải trải nghiệm

   Mùa hè ở Nhật còn được coi là...

Trợ Cấp Nghỉ Phép Chăm Con Sau Sinh ở Nhật Bản

Sau khi sinh con ở Nhật, bạn có thể...

Tiếng Nhật về Mẹ và Trẻ Sơ Sinh

Để các mẹ thuận lợi hơn trong việc sinh...

Tiếng Nhật bệnh hay gặp ở trẻ em

Dưới đây là một số triệu chứng và bệnh...

Tiếng Nhật khi làm thêm ở Combini

Bạn nhận được công việc làm thêm ở Combini,...

Cách ghi tờ khai xuất cảnh tại Nhật

Với những bạn lần đầu về nước từ Nhật,...

Thủ tục xin nhập quốc tịch Nhật

Nhật bản là nước phát triển bậc nhất thế...

ĐƯỢC QUAN TÂM

Thủ tục xin làm thêm 28 tiếng tại Nhật

ĐỐI TƯỢNG: Đối tượng cần làm đơn xin làm thêm...

Đơn xin làm thêm 28 tiếng – Hướng dẫn chi tiết.

ĐỐI TƯỢNG: Đối tượng cần làm đơn xin làm thêm...

Cách đăng ký sim giá rẻ LINEMO (LINE) – Mới Nhất

Giới thiệu: Nhà mạng Linemo được đổi tên từ nhà...

Hướng dẫn kiếm tiền từ Google AdSense mới nhất!

Google AdSense là gì? Kiếm tiền online là một từ...

Địa điểm ngắm lá đỏ đẹp nhất ở KANTO- Nhật Bản.

Ai đã từng đặt chân đến Nhật Bản, chắc...

Hướng dẫn thủ tục xin miễn giảm thuế cuối năm khi làm việc tại Nhật Bản (Điều chỉnh tiền thuế cuối năm).

Hai khoản thuế này đáng nhẽ ra là từng cá nhân sẽ phải tự kê khai và nộp cho cơ quan thuế, tuy nhiên, đối với các bạn đang đi làm tại các công ty thì thường bộ phận hành chính của công ty sẽ đại diện cho nhân viên của công ty làm các thủ tục thay cho tất cả nhân viên trong đó có bạn.

Tổng hợp sim giá rẻ ở Nhật Bản

Hôm nay mình xin giới thiệu đến các bạn...

Hướng dẫn đăng ký tài khoản Rakuten.

Mục đích đăng ký tài khoản rakuten: Tài khoản rakuten...

Cách photo copy giấy tờ 2 mặt tại combini

Tại Nhật, các máy photo copy thường có trong...

Dân số Nhật Bản giảm kỷ lục trong 13 năm liên tiếp.

Theo dữ liệu chính thức từ chính phủ Nhật...