#angular latest version

Striking news for Angular Developers! Angular 14, the latest version of the TypeScript-based free and open-source web app framework was launched on 2nd June 2022. Considering all the releases before, Angular 14 is one of Angular's most methodical pre-planned upgrades. If you are interested in a bird-eye view of what's fresh in Angular 14, then here's a quick sneak at latest Angular 14 features and updates.

Latest Angular 14 Features and Updates

1. Standalone Components

Now with Angular 14, modules are categorized as optional and standalone components will be possible. However, the purpose of Angular is to move away from the current state of affairs by creating artifacts like pipes, components, and directives, the main focus of the TypeScript-based Angular framework.  

2. Strictly Typed Forms

Angular 14 shuts Angular's main GitHub issue, i.e., implementing strict typing for the Angular Reactive Forms Package. It will improve the modern-driven approach of Angular to work smoothly with forms.

3. Angular CLI Auto-Completion

If your Angular CLI game is strong, you can settle on how to enhance productivity by delivering the needed commands to make artifacts like components, modules, and directives for your project. However, there are a plethora of commands at your disposal, yet many times you have to visit the official guide to scrutinize the commands and the commands options.

4. Enhanced Template Diagnostics

Angular 14 came with improved templated diagnostics to protect the developers from basic mistakes by compiler matching to typescript code. Now, in Angular 13 and the previous Angular versions, there is no warning generated by the compiler, and it fails to develop if there comes an issue that would restrict it from doing so.

5. Streamlined Page Title Accessibility

Your page title differently shows the content of your page when you are developing applications. In Angular 13, the entire process of adding titles was streamlined with the fresh Route.title property in the Angular router. However, Angular 14 doesn't have more additional imports needed when you are adding a title to your page.  

6. Latest Primitives in the Angular CDK

The Angular CDK, i.e., Component Dev Kit, offers a detailed set of tools for developing Angular components. Now, the Dialog and the CDK Menu have been pushed to a stable version in Angular 14. However, the new CDK primitives permit the making of more accessible custom components.  

7. Angular DevTools is now present online.

You can also employ the Angular DevTools debugging extension in offline mode. The extension is present under Mozilla's Add-ons for Firefox users.  

8. Optional Injectors

You can now mention an optional injector via ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView when developing an embedding view in Angularv14.  

9. Built-in Enhancements

Angular 14 backs TypeScript 4.7 also targeting ES2020 by default. It permits the CLI to deploy small code without devaluing it. One more Angular 14 meaningful feature helps you to link to protected component members directly from our templates. You get more control over the public API surface of the reusable components.  

10. Extended Developer Diagnostics

This feature from Angular v14 delivers an extendable framework that assists better insights into your templates and offers suggestions for potential boosts.  

For months now the Angular Development team had been waiting for the release for updates and new features in Angular. And finally, the wait is over as Angular 9.0.0 has been officially released. It has been a major release due to the changes to the ecosystem.

What’s new in Angular 9?

Below are the major aspects introduced in Angular 9:

Ivy Compiler

The outstanding change is the Ivy. Ivy is the default compiler and runtime with the release of Angular 9. Ivy has some gripping features like it improves the bundle size, adds improved type checking, allows for better debugging, agile testing, by default enables AOT compiler on and improves CSS class and style binding.

Smaller Bundles and Performance

The previous Angular versions had the problem of the filesize for the created JavaScript bundles i.e. app. The framework in Angular is much larger when compared to other libraries like React and Vue.js.

Though angular runtime is great, loading can take longer, you may not feel the difference while running. Ivy helps both small and large apps to improve bundle size savings which eliminate dead code.

Changes with Angular Forms

With this new angular version, there are some modifications in the form. Previously, < ngForm > was a valid selector that will no longer be used when An Angular form is referenced. Instead the < ng-form > can be used. You can now directly use the FormsModule. Instead of FormsModule.withConfig used previously.

Need for Faster Mobile Apps

In the era of smartphones, desktops contribute a very little percentage of the website traffic. Smartphones require more ‘mobile-friendly’ kinds of stuff by eliminating the downloadable resources for better user experience. To help out the Angular Developers in this scenario we have the Ivy engine that speeds up the application in multiple folds and enhances application load speed by reducing the size of Javascript classes.

Angular Component Updates

The components will not be imported via @angular / material in Angular 9. It uses secondary entrance points such as @angular/material/button.

i18n Improvements

Angular being a JavaScript platform has been embraced worldwide, and Angular CLI helps you to implement basic codes that are helpful in creating converter files in order to write applications in multiple languages. The Angular team further restructured the method on Ivy to make the implementation of compile-time inline easier.

Dependency Injection Changes in Core

There is slight improvisation for dependency injections in the new version of Angular. Though not a big change but support for the providedIn value section has been added.

@Injectable({ providedIn: ‘platform’ }) class MyService {…}

There have been an addition to the value library for the providedIn property like Platform-like scopes and any.

Features of Angular 9:

By default, Ivy is used for compilation.

The new version of TypeScript is available i.e. TypeScript 3.7.

AOT mode by default compiles the CLI apps.

Bazel: ts_library targets are supported for ng_package as entry-points.

tslib is listed as peer dependency and not as direct dependency.

ngtsc diagnostics are converted all to ts.Diagnostics.

ivy: new benchmark focusing on template creation is added.

ivy: add ngIf-like directive to the ng_template benchmark.

ivy: avoid native node retrieval from LView.

ivy: avoid repeated native node retrieval and patching.

ivy: avoid repeated tNode.initialInputs reads.

ivy: move local references into consts array, closes.

language-service: On TypeScriptHost it enable logging.

language-service: For invalid templateUrls it provides diagnostics.

language-service: For invalid styleUrls it provides diagnostics.

Some important facts about upgrading to Angular 9:

Updating to Angular 9 is automatic with ng update script if your application uses CLI:

npm install –no-save @angular/cli@^ 8.3.15

ng update @angular/cli @angular/core –next

Update your local ‘@angular/cli’ to version 8.3.15 or later 8.x version before updating for a better experience.

It is mandatory to include –next command line flag during the RC period.