Angular, the TypeScript-based, JavaScript-compiled, Google-developed framework, has been prevalent in the software industry since 2009. Over time, this framework has proved highly efficient for developing intuitive and dynamic applications as required by diverse industrial sectors. Owing to this, increasing demand for Angular JS development services has been observed globally. And this is obvious because, since the inception of Angular, it has come a long way releasing several advanced versions successfully in progression. AngularJS is known to be its first version and later, Angular 2, Angular 4, Angular 5, Angular 6, Angular 8, and Angular 9 were released. Recently, on 24June 2020, its latest version- Angular 10was released in the market. So let us explore this update in detail.

Angular 10 and its Value Offerings

Angular 10 looks quite smaller than its previous versions but is an effective attempt of the Angular team to keep this framework relevant and up-to-date. The AngularJS app developers conducted thorough research for this update and this time, they have emphasized more on improving quality, ecosystem, and tools rather than new features. Below are the top updates of this version:

CommonJS import Warnings

CommonJS was originally meant for designing the server-side modules and not for reducing the production package size. When the AngularJS app developers make use of dependencies bundled with CommonJS, it results in larger code bundles and ultimately slow performing applications. But after this update, the developers will automatically be notified in case a CommonJS module pulls into your build.

New Date Range Picker

The new date range picker is another update in the Angular UI Material component library. The components mat date input range and mat date picker range can be used for using this range picker.

Optional Stricter Settings

Angular 10 comes with a stricter project set-up for the creation of a new workspace using “ngnew”. Activating the flag- “ng new-strict” can initialize the new project just with a few settings. These settings enhance maintain ability, enable the CLI to optimize the app functions in an advanced manner, and also help to identify the bugs well ahead of time. Also, the “strict” flag reduces default bundle budgets by up to 75%, changes template type checking to Strict, it selects strict mode in TypeScript, allows advanced tree-shaking to configure the app as free of side-effects, preventing declarations of type any by configuring linting rules.

Updates in JS Ecosystem

The Angular team has made a few modifications for keeping the framework synchronized and up-to-date with the JavaScript Ecosystem. For instance, TypeScript is updated to TypeScript 3.9, the static analysis tool for TypeScript- TSLint has been updated to v6, and the runtime library for TypeScript- TSLib has been updated to v2.0. They have also upgraded the project layout. There is an additional tsconfig.base.json file as well which provides enhanced support to the way build tooling and IDEs resolve type and package configurations. Due to these updates, every Angular JS app development company can leverage these functionalities to the fullest for architecting responsive, user-friendly, and customizable apps and other software projects.

Bugs Resolutions

The Angular team has focused more on problem-solving during this update. They have worked with the community and made bigger contributions this time as about 700 issues were completely resolved considering the overall framework components and tools. The issues of ranges in the parser, Terser Inlining Bug, errors created due to migration when the symbol does not exist, etc. were fixed. Additionally, 2,000 more issues were touched.

Advanced browser Configurations

Browser configurations of Angular have been updated so that the new projects can exclude less used as well as older browsers like Internet Explorer 9, 10, Internet Explorer Web, etc. The Angular developers can add the browsers that need to be supported in the .browserslistrc file, for enabling ES5 builds and differential loading for browsers.

Some Deprecations

In Angular 10, several unimportant sections have been removed. For example, the Angular Package Format doesn’t include FESM5 or ESM5 bundles anymore. This saves about 119MB of install-and download-time, while running yarn or npm install for the libraries and packages in Angular. Since any down-levelling for supporting the ES5 is performed at the end of the build process, these formats aren’t needed any longer.

Also, Wrapped Value is deprecated. Probably, it will be removed in v12.WrappedValue was useful for triggering change detection even if the same object instance was emitted or produced. When Wrapped Value is utilized, there is a performance cost and this functionality is useful in relatively rare cases. As a result, the Angular team may have decided to drop it.

Additional Features and Updates

  • The team has added a program-based entry-point finder- EntryPointFinder in Angular version 10. This is supposedly faster than DirectoryWalkerEntryPointFinder.
  • A compiler interface has been introduced during this update that covers the actual ngtsc compiler. With the use of the project interface, the language service-specific compiler can manage several Type check files while also building Scriptinfos as needed.
  • In Angular 10, the team has removed Auto completion from HTML entities like &amp, due to certain performance issues and problematic value.
  • It is now possible to configure Async locking timeouts which adds support for the ngcc.config.js file. This sets the retryDelay and retryAttempts options for the AsyncLocker.
  • The team has also made type-checking performance enhancements to the compiler-CLI.
  • Angular version 10 supports the merging of several translation files. Before this version, only a single translation file was permitted per locale. Now it is possible to specify multiple files per locale for the users and with the help of messaging ID, the transactions from every file will be merged.
  • For performance improvement, the Angular team has made computation of basePaths lazy, so, the work will be performed in TargetedEntryPointFinder only if required. Before this version, the basePaths got computed as and when the finder got instantiated even though the entry-point was already processed. This was a waste of effort which has now been handled.
  • Urlmatcher’s type now indicates clearly that it can always return null.
  • Improved performance due to a decrease in the size of the entry point manifest and implementing a caching technique in the manifest.

Final Verdict:

With incredible features, some removals, and some modifications, Angular has enriched itself and become all the more powerful. Features like data linking, reusing of web elements, tooling, etc. along with Google’s vibrant community support, the popularity of Angular development has exponentially risen.

With this, we come to the end of our topic. We hope this blog was knowledgeable and helpful to you!

Let us know your thoughts in the comment section or send us a mail at sales.enquiry@biz4solutions.com for any concerns!