GMO-Z.com Vietnam Lab Center Technology Blog

Angular phiên bản 9 có gì mới?

H.D.K -

I. Lời mở đầu

Vậy là tính đến thời điểm hiện tại, Angular đã ra đến phiên bản 9. Phiên bản 9 được xem như là lần update lớn nhất mà phía Angular từng làm và phải mất đến 3 năm để họ hoàn thành. Hôm nay chúng ta sẽ điểm qua một số điểm mới ở phiên bản này.

II. Một số điểm mới ở Angular phiên bản 9

1. Ivy

Ở phiên bản 8, Angular dùng compiler và runtime mặc định là View Engine. Ivy cũng đóng vai trò tương tự như View Engine nhưng nhanh hơn và tốt hơn. Nếu muốn sử dụng Ivy sẽ phải config thêm như sau:

"angularCompilerOptions": {    "enableIvy": true  }

Đến với phiên bản 9, cuối cùng thì các lập trình viên cũng có thể sử dụng Ivy là compiler và runtime mặc định của Angular rồi.

Vậy thì Ivy tốt như thế nào? Khi sử dụng Ivy chúng ta sẽ được đạt những lợi ích sau:

  • Giảm kích thước file bundle
  • Test nhanh hơn
  • Debug tốt hơn
  • Cải thiện CSS class và style binding
  • Cải thiện type checking
  • Cải thiện build errors
  • Cải thiện thời gian build, cho phép sử dụng AOT 1 cách mặc định

Sau đây chúng ta sẽ đi vào chi tiết 1 số lợi ích mà Ivy mang lại.

2. Giảm kích thước file bundle

  • App nhỏ có thể giảm kích thước file bunlde 30%
  • App lớn có thể giảm kích thước file bundle 25-40%
  • App trung bình có thể giảm kích thước file bundle 2%

3. Test nhanh hơn

Ở phiên bản trước, TestBed sẽ compile lại tất cả các component của từng test mặc cho những component đó có thay đổi gì không (ví dụ như bị thay đổi thông qua override)

Ở phiên bản 9, TestBed chỉ compile lại khi 1 component override. Điều này giúp cho tốc độ chạy test cải thiện được 40%

4. Hỗ trợ ModuleWithProviders tốt hơn

Ở phiên bản trước, khi sử dụng ModuleWithProviders, lập trình viên có thể chỉ rõ type của nó là gì hoặc cũng có thể không cần làm việc đó. Nhưng đến phiên bản 9, bắt buộc phải chỉ ra type của module là ModuleWithProviders<T>

Code cũ của bạn có thể sẽ viết như thế này:

@NgModule({ ...})
export class MyModule {
  static forRoot(config: SomeConfig): ModuleWithProviders
{  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  
   };  
 }  
}

Và giờ đây nó sẽ trở thành như thế này:

@NgModule({ ...})  
export class MyModule {  
  static forRoot(config: SomeConfig): ModuleWithProviders<**SomeModule**>  
{  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  
   };  
 }  
}

5. Thay đổi về Angular Form

Cách viết <ngForm></ngForm> không còn hợp lệ nữa mà thay vào đó phải viết thành <ng-form></ng-form>

FormsModule.withConfig đã bị bỏ đi và bây giờ nó trả thành FormsModule để ta có thể viết ngắn hơn.

6. Thay đổi Dependency Injection

@Injectable({    providedIn: 'platform'  })  class MyService {...}

Scopes như platform được thêm vào danh sách các giá trị của thuộc tính proviedIn

7. Hỗ trợ sử dụng Typescript 3.7

Typescript 3.7 được release và tháng 11 năm 2019. Angular 9 được update để sử dụng Typescript phiên bản 3.6 và 3.7

8. Cho ra component mới

Nhằm tận dụng khả năng của Youtube và Google Maps, Angular 9 đã cho ra 2 component mới là youtube-player và google-maps component

III. Nguồn tham khảo

https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3

https://www.telerik.com/blogs/top-new-features-of-angular-9

https://www.angularminds.com/blog/article/top-10-features-of-angular-9.html