Angular v14: Features and Migration Guide Tips

The latest version of Angular is here. Angular v14 was released on 2nd June’22 and brought with it standalone components, strictly typed forms, Angular CLI auto-completion, and Streamlined Page Title Accessibility, among other updates and features. The Google-developed TypeScript-based open source framework has also focused on better error handling by introducing enhanced template diagnostics to make it more developer-friendly. The latest updates of Angular can be availed by running ‘ng upgrade’ in the concerned projects with consideration of the migration guide available on ‘update.angular.io’.

Key features & updates of the Angular v14:

• Standalone Components: Angular is built around Modules that act as units of reuse. Now with the current release, independent components have been introduced with the developer preview. It will allow developers to import components, directives and pipes to be used directly, which was not possible earlier outside their respective modules.

• Typed Reactive Forms: This upgrade ensures that the values inside of form controls, groups, and arrays are type safe across the entire API surface. FormControl, FormGroup etc. now take generic types indicating the type of the value it holds.

From now on, updating an earlier version of a project to version-14 will modify the syntax of form classes as:

FormControl → UntypedFormControl

• Robust Error Codes: More optimized runtime and syntax error codes have also been added to debug the failures in development. Extended diagnostics have been introduced which are configurable in ‘tsconfig.json’, where it can be specified whether to consider diagnostics a warning, error, or suppression.

• Angular CLI autocompletion: To assist developers and prevent typos, new ‘ng completion’ with a choice of type-ahead autocomplete has been introduced in Angular CLI. The choice will be asked for the first time using the angular-14 application:

• Ng cache: ‘ng cache’ provides a way to control and print cache information from the command line. One can enable, disable, or delete from disk, and print statistics and information for projects in the workspace.

• Angular DevTools in Offline: The Angular DevTools debugging extension was introduced in the Angular-12 release. It has now been enabled with offline support.

• TypeScript 4.7: Angular v14 has now induced support for TypeScript 4.7 as well as deprecated support of versions earlier than 4.6.0.
• Streamlined Page Title Accessibility: With the current release, adding titles has been streamlined with the ‘route.title’ property in the Angular router without any necessity of additional imports.

Angular Migration Guide Tips | v13 to v14

· Run ‘ng update @angular/core@14 @angular/cli@14’ in the terminal to bring it to version 14 of Angular.

· Follow-up on TypeScript 4.6 and related changes.

· Make sure to use Node 14.15.0 or later versions.

· Form models now require a generic type parameter. For gradual migration one can opt-out using the untyped version of the form model classes.

Summary:

Through above examples, we saw how to adapt our Angular versions with 14. I hope this ‘in a nutshell’ guide helps you to pick the latest features for your project needs. Please let me know in the comments, if the migration succeeds!

Further reads:

· Detailed migration guide at: update.angular.io

· Related angular articles: blog.angular.io

· TypeScript updates: devblogs.microsoft.com/typescript