It’s time for another feature breakdown of the latest release by the Google Angular team i.e. Angular 14. Last year in November, we saw Angular bringing some revolutionary features with Angular 13.

I had also written a post where we predicted what features will likely be part of the Angular 14.

Now that the latest version of the framework has been released, let’s see how many predictions have come true and what else has been included in this newer version. So, without further ado, let’s get started:

Angular 14: What’s New with the Latest Angular Update?

Angular 14 was expected to offer features such as Typed Forms for better typing, independent components from models, micro frontend architecture for scalable development, and many others. Let’s see what it actually includes:

1. Standalone Components

It aims to simplify Angular and streamline the authoring of apps by lowering the NgModules needs. Currently, standalone components are in developer preview and are ready to be used in apps for exploration and development but are not stable.

By harnessing the power of open-source, the Angular team will make sure that standalone components are prepared to be released as a stable API.

2. Typed Angular Forms

Angular 14 addresses and closes one of the biggest issues which was implementing strict typing for the Angular Reactive Forms package. Angular Typed Forms ensure that the values inside of the groups, form controls, and arrays are type-safe across the entire API surface.

It makes forms safer, especially for deeply nested complex cases. Through incremental migration to typed forms, you can gradually add typing to your existing forms with full backward compatibility. NgUpdate will replace all form classes with an untyped version so you can enable types on your own.

3. Streamlined Page Title Accessibility

Yet another best feature of the v14 is making sure the page’s titles reflect the content on the page in a unique and distinctive manner. It was first introduced in v13.2 in the Angular Router. Moreover, adding a title does not need additional imports and is strongly typed.

To learn more about this feature and what it does, watch this Google I/O workshop on building accessibility with Angular.

4. Streamlined Best Practices

Angular v14 is all set to make you feel convenient with something that is designed specially to do that. The new change detection instruction on angular.io, Angular v14 comes with built-in tools to allow developers to build quality apps.

From routing to your code editor, new modification detection instructions on angular.io.

5. Extended Developer Diagnostics

It provides an extendable framework that gives you more insights into your templates and how to improve them. Diagnostics give compile-time warnings with precise actionable suggestions to catch bugs before run-time.

The Angular team has introduced a new flexible framework in v14 for developers to add diagnostics. In v13.2, they introduced built-in extended diagnostics to help developers catch two of the most common templating errors.

6. Tree-Shakable Error Message

V14 comprises new runtime error codes which make it simple and quick to recognize and reference information on how to debug your failures. This feature enables developers to build an optimizer to keep error codes from production bundles while tree-shaking error messages.

The angular team recommends visiting reference manuals and replicating the mistake in the dev environment to detect the whole text while debugging a problem in production. To use this updated format in future versions, devs need to keep restructuring the current errors gradually.

7. “Banana In a Box” Error

It is a common syntax error that is nicknamed by the Angular team as “Banana in a box” as brackets and parentheses are flipped in two-way binding. In this error, ([]) instead of [()] is written and () looks like a banana while [ ] looks like a box, thus the name banana in the box.

While it’s valid syntax, Angular CLI can recognize it to be rare that developers intend something similar. Detailed messaging was introduced in v13.2 on the mistake and guidance to solve it which was included within the CLI and code editor.

8. Catch Nullish Coalescing on Non-nullable values

There has been a rise in the blunders for useless nullish coalescing operations due to extended diagnostics in Angular templates. It is raised when the input is not nullable, meaning its types do not comprise null or undefined.

With extended diagnostics, you can see warnings during ng build, ng serve, and in real-time with Angular Language Service. The diagnostics are configurable and are specified whether to consider these diagnostics warning, error, or suppression.

Other Built-In Enhancements Included in Angular 14

• You can now bind protected components from the templates to control the public API surface of your reusable components.
• V14 adds support for passing an optional injector when developing an embedded view, which enables the dependency behavior to be personalized within the specific template.
• A community contribution puts an end to a top issue and makes NgModel changes reflected in UI for OnPush components.
• Angular CLI has been enhanced for more consistency and added support for combined aliases usage.
• Angular 14 comes with real-time auto-completion for commands such as ng serve.
• You can now print ng analytics and control its settings.
• Ng cache is there to give you control and print cache information from CLI.

Conclusion

Seems interesting right? Now, you’ll be wondering how to install it.

To install Angular 14 via npm, employ the next flag and go ahead with opening a new command-line interface and run the below command:

npm install — global @angular/cli@next

To update your Angular version from v13, run the following command:

ng update @angular/core@14 @angular/cli@14