Tech Hub

Angular 9

Angular 9 and its features

Angular was launched in 2009. Latest version of Angular “Angular 9 “was released on February 7th, 2020. Angular is the most popular JavaScript framework, for developing front-end desktop web apps or single-page applications. Supported by Google, Angular has evolved into a fully grown and well-developed platform. 

When it comes to front-end development, Angular is the first choice for most of the developers around the world. Every 6 months a new version is released as it becomes highly crucial for the development team to fix bugs and modify the already existing framework. 

What is new in Angular 9?  This new update aims to fix all the existing drawbacks. There were many factors that have affected the previous versions of Angular. For instance, large bundle files negatively impacting the application performance, user experience and download time. To solve the size issue of the file bundles, Ivy comes in action! Ivy is Angular’s next-generation compilation and rendering pipeline.

Let's discuss IVY and other features of the Angular 9.

Ivy Compiler

The new version incorporates a change in the core structure of the entire Agular framework. The IVY renderer will be used as a default compiler for all applications. Applications built with IVY are more efficient. The IVY compiler fixes several bugs and has additional features to it as well. 

Improves the Bundle Sizes

This feature decreases the bundle size by 25-40 percent based on the app size. It is quite beneficial for small apps as they have to generate less code for the angular components. Thanks to Ivy, smaller bundles will increase the performance. 

Faster Mobile Apps

Angular 9 developers can redesign and decrease the size of downloadable files which in-turn will increase the mobile user experience. By reducing the size of JavaScript bundles, Ivy opens a platform for developers to speed up the application and enhance the user experience. 

Better Debugging

One of the many features of IVY compiler and runtime is debugging. It is difficult for developers to develop a program that is completely bug-free. That is the reason why it is important to equip the codebase with tools and techniques to flesh out the bugs itself. 

Angular 9 uses some unique techniques and tools to debug its applications. With the help of this, you can ask Angular for access to instances of the components and directives and can trigger change detection with applyChanges or manually call methods and update state.

Improved Type Checking

The Angular compiler checks the expressions and bindings within the templates of the application, and it reports any type error that is found. Bugs are caught and fixed at the early stages of the development phase. This new version has three modes of doing it. Apart from the default flag, these are the other flags that angular supports. 

  • fullTemplateTypeCheck — By activating this flag, the compiler will check everything within your template (ngIf, ngFor, ng-template, etc)
  • strictTemplates — By activating this flag, the compiler will apply the strictest Type System rules for type checking.

Faster Testing

The new implementation of the TestBed in Ivy, makes it more concise to arrange the components between tests. This avoids the recompilation between majority of tests. With this new update, the framework’s core acceptance tests are about 40% faster and user's own application test speed will be 40–50% faster.

Better CSS Class and Style Binding

The Ivy compiler and runtime handles style in a predictable manner. In the previous versions of Angular, if an application had competing definitions for a style then those styles would replace each other. This new feature of Angular 9 can manage styles through a clear and consistent order of precedence which is not dependent on timing.

[style.color]="myColor"
 [style]="{color: myOtherColor}" myDirective>
 @Component({
  host: {
     style: "color:blue"
  },...})
...
@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

Enables the AOT Compiler by Default

The new architecture IVY shows a significant change in the compiler's performance. This means that the AOT builds will be much faster than before. The change in the compiler and runtime would no longer require entryComponents. and ng serve.

Angular 9 will automatically compile these components depending on their usage.

Selector-less Directives in Ivy

Selector-less directives as base classes, they were already supported in the old View Engine but were not there in the Ivy preview in Angular 8. This is added to Angular 9.

Improved Internationalization (i18n)

One of the important features of Angular 9 is internationalization. This new solution has balanced most of the drawbacks without losing performance. In early stages, the latest angular produced one building, followed by a translation of texts consolidated in a copy. Ivy makes it easier to carry out the whole process. 

The Phantom Template Variable

The phantom variables were not cited in the template’s associated component. Creating these phantom variables can usually threaten our applications. In Angular 9, you get a compiler error when a template variable is created which is not defined in a component.

API Extractor Updates

Angular depends on many different services and libraries to function effectively. These are usually difficult to maintain and update. With this new version, these libraries are tracked and updated by Bezel which detects the API landscape of these libraries and produce reports to find out missing updates or new features. It documents them in such a way that they are communicated easily.

New Options for 'providedIn'

This angular 9 feature provides some additional options while creating an @Injectable service in Angular.

  • platform— The providedIn: 'platform' makes the service available in a special singleton platform injector that is shared by all applications on the page.
  • any— Provides a unique instance in every module (including lazy modules) that instills the token.

Component Harness

Another important feature of Angular 9 is to offer an alternative way to test components. You disconnect the implementation details to make sure that the unit tests are correctly audited and less frail. It is making harnesses available to any component author as part of the Component Dev Kit (CDK). Changes have been made to the compiler and runtime, and so you no longer need to identify this in the entryComponents array. Angular will find the component on its own. But Angular will not remove the component from the entryComponents array by itself, you need to search your code after updating and manually removing them to test.

it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

Improvements in IDE and Language Service 

Another significant improvement in Angular 9 is made to the Angular language service extension on the Visual Studio Marketplace. The Angular Essentials extension includes a set of useful extensions to build up the development experience. One such code is Angular Language Service that adds many features to VS Code. This helps to write Angular code. Other useful extensions include debugging extensions, Angular snippets, and ESLint. This feature of Angular 9 has fixed many long-standing bugs along with increased performance and stability issues

Typescript 3.7 Support

  • Optional chaining      
  • Nullish coalescing
  • Assertion Functions
  • Better Support for never Returning Functions 
  • (More) Recursive Type Alias
  • --declaration  and   --allowJs
  • The useDefineForClassFields   Flag and the declare   Property Modifier
  • Build Free Editing with Project References
  • Uncalled Function Checks
  •  / /  @ts-nocheck in TypeScript Files
  • Semicolon Formatter Option
  • Breaking Changes    
  • DOM Changes
  • Function Truthy Checks
  • Local and Imported Type Declarations Now Conflict
  • API Changes

Released on November 2019, Typescript 3.7 gave a major upsurge to new angular 9. The new version, angular 9 is updated to work with TypeScript 3.6 and 3.7. The chaining feature of the Typescript 3.7 helps to stay in sync with the environment. Angular 9 will support the usage of the same TypeScript Diagnostics format for the TypeScript Compiler diagnostics and that will generate more descriptive error message.

Updating CLI Apps

If your application uses the CLI, with the help of the ng update script, you can update to version 9 automatically.

ng update @angular/core@8 @angular/cli@8  
git add .  
git commit --all -m "build: update Angular packages to latest 8.x version"  
ng update @angular/cli @angular/core --next`

Future of Angular 9

The aim of Angular 9 is to make the Ivy compiler available for all apps. The most significant benefit of Ivy is to reduce the size of applications for better user experience.

With Angular 9, the community will benefit from lighter and high-performance applications. Developers will have a clear insight into the syntax and the project structure which will result in better development experience. 

For the future, the Angular team is likely to work on developing components and directives. The Angular team has already notified that there won't be any need for a major API change. Enhanced development experience is always something to look forward to.

Feel free to contact us for Angular development services.

Share Linkedin