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-eslint và tslint-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: 34869msUpdated 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 --hmrSau 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/coreSau 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.5Thank you!