The much-awaited Angular version 14 has finally been launched. The new version implements two new RFCs as compared to the Angular 13.
Simplifying Angular with Standalone Components
The goal of Angular standalone components is to reduce the requirement for NgModules in the development of Angular apps. Standalone components are under developer preview in v14. They are available for usage in your apps for research and development, but they are not a stable API and may change outside of our regular backward compatibility strategy.
The standalone: true flag lets you include imports directly in your @Component() without using a @NgModule with standalone components, directives, and pipes (). Angular used open-source in the developer preview to guarantee that standalone is completely prepared for release as a stable API.
Add your first standalone component with ng generate component <name> --standalone
Typed Angular Forms
![A VSCode editor window open to an Angular v14 form group. The editor provides typing support for the FormGroup and FormControls. Find the code here: https://gist.github.com/twerske/c06a9dcea9eee1f881d5d08551c8e873.]()
Source: blog.angular.io
Typed forms guarantee that the values included within form controls, groups, and arrays are type-safe over the whole API surface. This allows for safer forms, particularly for deeply nested complicated instances.
Update schematics provide progressive migration to typed forms, allowing you to gradually add typing to existing forms while maintaining complete backward compatibility. ng update will replace all form classes with untyped versions (FormGroup -> UntypedFormGroup, for example). Types can then be enabled at your leisure (for example, UntypedFormGroup -> FormGroup).
To make use of the new typing capabilities, the development team suggested looking for instances of the Untyped forms controls and migrating to the new typed forms API surface when feasible, and new apps utilize Form* classes unless the class is purposely untyped (for example, a FormArray that has both numbers and strings).
Streamlined best practices
Starting with new change detection instructions on angular.io, Angular v14 has built-in tools that help developers build high-quality apps, from routing to your code editor, starting with new change detection instructions on angular.io.
Streamlined page title accessibility
Another recommended practice is to make sure that your app's page names express the page's information in a distinctive way. The new Route.title attribute in the Angular Router in v13.2 simplifies this. Adding a title no longer necessitates any additional imports and is strongly typed.
Extended developer diagnostics
The new expanded diagnostics provide an expandable framework that provides greater insight into your templates and how they may be improved. Diagnostics provide compile-time warnings with specific, actionable recommendations for your templates, discovering errors before they execute.
![]()
Source: blog.angular.io
"Banana in a Box" Error
In two-way binding, a typical developer syntax error is to reverse the brackets and parentheses, writing ([]) instead of [()]. Angular dubbed this the "banana in a box" mistake since () looks like a banana and [] looks like a box, and the banana should belong in the box. While this is technically correct grammar, Angular CLI understands that this is seldom what developers desire. Angular included a detailed message on this error and assistance on how to fix it in the v13.2 release, all within the CLI and your code editor.
Catch nullish coalescing on non-nullable values
Extended diagnostics also indicate problems in Angular templates for pointless nullish coalescing operators (??). This error is thrown when the input is not "nullable," that is, its type does not contain null or undefined. Extended diagnostics appear as warnings during ng build, ng serve, and while using the Angular Language Service in real-time. Diagnostics may be configured in tsconfig.json, where you can indicate whether they should be a warning, error, or suppress.
Tree-shakeable error messages
This release includes new runtime error codes. Robust error codes make it easy to identify and reference information on how to debug your failures. This enables the build optimizer to keep error codes while tree-shaking error messages (long strings) from production bundles. To inspect the whole text while debugging a production problem, angular advises visiting the Angular reference manuals and replicating the mistake in a development environment. Devs will continue to restructure current errors slowly in order to use this new format in future versions.
These were some of the features included in the Angular v14, to know more about new features, visit here.