What’s new with Angular 9?

Angular 9, an open-source framework developed by Google, stands as a cornerstone for modern web and mobile application development. Harnessing the power of HTML and TypeScript, it provides a robust foundation for developers seeking stability and efficiency in their projects. This versatile framework empowers developers to create applications that not only perform seamlessly but also adhere to industry-standard architectural practices such as MVC (Model-View-Controller) design.

In this blog, we delve into the compelling reasons why transitioning to Angular 9 is a crucial step for any developer or team looking to elevate their application development process. We’ll explore the enhancements and features that Angular 9 brings to the table, shedding light on how they can significantly benefit your projects. From improved performance and build times to advanced error handling, Angular 9 promises a host of advantages that can make a substantial difference in your development workflow. Let’s dive into the details and uncover why Angular 9 should be on your radar.

Why should you update to Angular 9?

The tools, libraries, and reusable components remain operational if you update. It will solve the performance issues when the file size was huge as it affects the download time. With rising internet users, the downloadable file size needs to be lesser in order to improve speed of an application whether web or mobile based.

Lets you create smaller bundles to improve the performance of the applications. Improves build times, and error messages are easy to read. Long time support (LTS) for Angular 8 is available till 28 Nov 2020 so get Angular 9.

Upgrade pre-requirement:  

• Use Node 12
• If you are using lower version first you should update to 8.3/8.x
• Update to Typescript 3.7
• To see the updates in process enter ng update @angular/cli @angular/core

To upgrade click on https://update.angular.io/

Dealing with error while upgrading to version 9:

• Temporarily turn off Ivy in the tsconfig.json
• Restart your application
• The errors other than Ivy will be highlighted
• Resolve them and for the remaining errors refer version 9 guide

What’s new with Angular 9, its features and how will it benefit?

Let’s have a look at new and added back in the new Angular 9, features that went missing in earlier version:

• With new release Ivy is now a default compiler and renderer
• Ivy Compiler is set a default and there is no need to use “enableIvy”: true and node_modules/.bin/ngc
• AOT (ahead-of-time) compiler in on by default, which means Angular 9 will automatically compile. AOT converts HTML to JavaScript files before sending to client this adds to security and reduces injection attacks. The changes made in the compiler and the runtime does not require entryComponents and ng serve.
• The Angular compiler checks for the errors in the templates of an application detecting the defects early by setting a fullTemplateTypeCheck flag. Similarly, strictTemplates flag activation helps in stringent checking of templates.
• Save efforts of debugging, testing, style binding with IVY as default compiler
• Angular compiler used to created TypeScript diagnostics and internal API diagnostics; with recent changes, it converts all diagnostics to TypeScript diagnostics format.
• This commit provides support for the language service as it infers the type of variables bound to ‘ngIf’ template context member not the ‘$implicit’ context member.
• Ivy converts templates created in Angular into JavaScript code.
• Transform the templates and components to JavaScript and HTML with Angular ViewEngine
• Ivy allows to add a micro benchmark using style or map base for style and class bindings “map_based_style_and_class_bindings” or “style_and_class_bindings”
• Now set configuration default Encapsulation and preserve whitespaces using platformBrowserDynamic().bootstrapModule()
• ViewEngine’s base classes, the Selector-less Directives in Ivy are back in the latest version
• Ivy renderer being the default in Angular 9, no need to set enableIvy in the tsconfig.json
• Work faster with lesser instructions required for coding, now create code of international standards
• Angular 9 updates the API Extractor it uses an open source tool Bazel to enable automation and software testing
• Users experience performance improvement compared to Angular 7 and 8 and have clearer syntax and project structure helps developers in faster development and release
•  Angular 9 now supports compile-time that determines in lining possibilities
• Developers can deploy their finalized app to the cloud from the command-line interface after introduction of new ng deploy. Just run ng add @ angular/ and follow it with ng deploy command.
• Speed up the production with Angular CLI that allows to product two bundles for both modern and legacy browsers
• In earlier version, it just prompted an error but now you can completely automate cleaning of outdated artifacts from a whole package using ngcc. It cleans up only those processed by ngcc and those remaining are not outdated.
• Ngcc can restore backup files rename them for easy reference eg. __ivy_ngcc_bkup
• Make use of ‘getTsDefinitionAndBoundSpan’ to get Angular specific definitions designed to call on templates in TypeScript file and ‘readTemplate’

What remains unchanged with Angular 9?

• Nothing to unlearn.
• It adds dependency to injection Angular Core for the provideIn value i.e. providedIn: ‘platform’. provideIn marks a class as available to determine supply of injectables by an injector
• TestBed.get() has been replaced by TestBed.inject(), it has same behavior but is type safe
• It has common commands of Angular 8.3 but with a better-looking interface

Bug Fixing:

• Removing the irregular whitespace for CurrencyPipe e.g. to trim whitespace in formatNumberToLocaleString use remove-currency-pipe-trailing-space
• Angular 9 has a logic to generate advance instructions before i18nExp, this saves the necessary lifecycle hooks being flushed before capturing the expression value
• Currently the logic pulls multiproviders to provider list of the parent module resulting in the multiprovider defined as an extra item in array of values. This release stops pulling of providers to the parent module but does not remove the duplication.
• Improve performance with Ivy; it removed the repeatedly read/write memory from addComponentLogic. The native host being read twice in view and index both getNativeByTNode(hostTNode, lView and lView[hostTNode.index]
• Angular core adds Dependency Injection (DI) Providers @Injectable ({providedId: ‘platform’,//tree shakable injector for the platform injector})
• With this new release, Angular has improved on non-callable error message.
• A new fix in ngcc for overlapping entry-points where the attempt was to process some files twice and as a result it would crash popping an error and prevent other entry-points being processed. With this commit changes ngcc, if ‘error On FailedEntryPoint’ is false, it simply adds an error to the log and continues to process entry-points.
• If in a project, ngcc ‘errorOnFailedEntryPoint’ is true if you have provided `targetEntryPointPath’ e.g. sync integration with the CLI then it shall target the entry-point and exit after pointing an error.
• Earlier to this release, the Angular code created using Bazel and Ivy generated .ngfactoryfiles. The @bazel/typescript CompilerHost treats the .ngfactoryfiles as original source file. In Angular, the implementation allows processing the shims while compiling with Ivy. By default it will skip the tsickle processing for files not present in the original srcs[], but the  shouldSkipTsickleProcessing can validate the correct behavior of tsickle if the host is configured to process the generated factory shims.
• Properties in the mappings let you link directly to the required segment in ngcc link the segment markers for faster tree traversal by matching against the modified ‘generatedSegement’, the merging algorithm to find the given segment from the source file.
• Now avoid unnecessary computation for storing the position of SegmentMarkers, prior to this release it required extensive computation on line start positions, columns etc. for each segment

Know this if you are migrating to Angular version 9:

Automate migration with CLI, migrate the dynamic queries, injectables, and missing components, migrate the modules with providers, and renderer.

Synopsis:

For front end development, Angular 9 is the original choice of worldwide developers. The all new Angular 9 has better debugging capacity, improved bundle size, and enhanced type checking. Angular Ivy lets you redesign apps working faster even with a slow internet connection. Angular has major releases every six months before the APIs denounce.