Angular

Quick Guide: Angular 10 vs Older Versions

Ravi Bhindi
By Ravi Bhindi
Nov 02, 2020
Quick Guide: Angular 10 vs Older Versions

On 24th June 2020, Angular 10 was launched but this time, with the beta version. It’s a big release; nevertheless, this most recent angular version will highly focus on the quality tools and ecosystem instead of launching new features.

 

In case you are a web app developer, who uses Angular for every project, you should be seeking the basic features and value additions of the latest Angular version 10. Let’s take a look at the key features and value offerings of Angular 10!

  1. TypeScript v3.9 Support - TypeScript 3.9 has performance improvements, which means faster Angular builds, especially in larger projects. Second, all the latest TypeScript fixes and features are available to Angular developers. Last, but not least, Angular developers will be using a more elaborate TypeScript configuration.

  2. Angular Language Service - Angular Language Service is an analysis engine that integrates into your code editor and provides it with a way to get completions, tracing of references, errors, hints, and navigation inside Angular templates. 

It’s available as an extension for Visual Studio Code, WebStorm, and Sublime Text. You can install it by using the following command:

npm install --save-dev @angular/language-service

A compiler interface has been added that wraps the actual ngtsc compiler. The language-service-specific compiler manages multiple typecheck files using the project interface, creating ScriptInfos as necessary.

Remove HTML entities’ autocompletion. Autocompletion is being removed from HTML entities, such as &, <, etc., because it’s outside the core functionality of Angular LS, and it has questionable value and a performance cost.

 

  1. Compiler - Angular offers 2 ways to compile your application:

    1. Just-in-Time (JIT) - It compiles your app in the browser at runtime. This was the default until “Angular 8”.
    2. Ahead-of-Time (AOT) - It compiles your app and libraries at build time. This was the default until “Angular 9”.

Ivy is a Compiler that is complete rewrite of the compiler (and runtime) in order to:

  • Reach better build times (With a more incremental compilation).
  • Reach better build sizes (With a generated code more compatible with tree shaking).
  • Unlock new potential features(metaprogramming or higher-order components, lazy loading of the component instead of modules, a new change detection system not based on Zone.js).

 

  1. The 2 new Compiler Entry Points - Angular has introduced 2 new Compiler Entry Points: ngtsc and ngcc.

    1. Ngtsc - It compiles Ivy-compatible code. It’s a TypeScript-to-JavaScript transpiler that looks for Angular decorators like  @Component and substitutes them with their specific Angular runtime instructions/counterparts, like eedefineComponent. It’s a minimal wrapper around tsc. The ngc operates as ngtsc when the angularCompilerOption enableIvy flag is set to true.

Compilation Flow - When ngtsc starts running, it first parses the tsconfig.json and then creates a ts.Program. Several things need to happen before the transforms described above can run and that is:

  • Metadata must be collected for input source files which contain decorators.
  • Resource files listed in @Component decorators must be resolved asynchronously. The CLI, For example, may wish to run Webpack to produce .css input to the styleUrls property of a @Component.
  • Diagnostics must be run. Which creates the TypeChecker and touches every node in the program.

  1. Ngcc - It stands for Angular Compatibility Compiler. It converts pre-Ivy modules (old style) to Ivy-compatible code. It processes code coming from npm and produces the equivalent Ivy version as if the code was compiled with ngtsc. Ngcc can also be run as part of a code loader like webpack to have packages from node_modules transpiled on the fly.

 

  1. More-strict Project Setup - Optional stricter settings offer a more-strict project setup when creating a new workspace with ng new, via ng new -- strict. Enabling this flag initializes a new project with new settings to improve maintainability, help catch bugs, and allow the CLI to do advanced optimizations on an app.

 

  1. Router - For the router, the CanLoad guard now can return Urltree. A CanLoad guard returning Urltree cancels the current navigation and redirects. This matches current behavior available to CanActivate guards that also has been added. This doesn’t affect preloading. A CanLoad guard blocks any preloading; any routes with a CanLoad guard won’t be preloaded, and the guards won’t be executed as part of preloading.

 

  1. Angular Material - Angular Material now includes a new date range picker. To use the new date range picker, you can use the mat-date-range-input and mat-date-range-picker components.

 

  1. TSlib - The runtime library for TypeScript containing helper functions, has been updated to V2.0.

 

  1. TSLint - The TSLint static analysis tool for TypeScript has been updated to v6.

 

  1. Angular Package Format -  Angular Package Format no longer includes ESM5 or FESM5 bundles, saving download and install time when running yarn or npm install for Angular packages and libraries.

 

  1.  Browser Support - The browser configuration for new projects has been updated to exclude older, less-used browsers. Support is deprecated for Internet Explorer 9, Internet Explorer 10, and Internet Explorer Mobile.

 

  1.  Core - Warnings about unknown elements are now logged as errors. This won’t break your app, but it may trip up tools that expect nothing to be logged via console.error.

  • Generic has been made mandatory for ModuleWithProviders.A generic type parameter has been required for the ModuleWithProviders pattern to work with the Ivy compilation and rendering pipeline, but before this commit, View Engine allowed the generic type to be omitted.If a developer is using ModuleWithProviders without a generic type in your application code, a version 10 migration will update the code for you.

 

  1. Async Locking Timeout - Async Locking Timeout’s configuration is still probable, which may include assistance in the ngcc.config.js file,  adjusting the retry delays and retry attempts in the AsyncLocker. 

An examination has been combined for monitoring for the timeout, using the ngcc.config.js file to lower the timeout and prevent the more maximized application of the test.

 

     14. Bug Fixes:

  • Router: UrlMatcher is now allowed to return null.
  • Core: undecorated-classes-with-decorated-fields migration doesn’t decorate derived classes.
  • Service Workers: Prevent Service Worker strategies from affecting App stabilization.
  • A number of bug fixes have been made, including the compiler avoiding undefined expressions in a holey array and the core avoiding a migration error when a nonexistent symbol is imported.
  • Another bug fix properly identifies modules affected by overrides in TestBed.
  • minLength and maxLength validators will validate only if the value has a numeric length property.
  • Reactive forms had a bug which caused valueChanges for controls bound to input fields with number type will fire twice.The listed event is changed from “change” to “input” to fix this.
TAGS Angular-10
Ravi Bhindi

About the Author

Ravi Bhindi

This is Ravi Bhindi, Front End Developer at MagnusMinds IT Solution LLP. I am having vast experience working on front end frameworks like Javascript, AngularJs, Angular, ReactJs, Ionic-angular. Also, having experience in Web designing using CSS, SASS, Bootstrap.

RECENT POSTS

CATEGORIES

TAGS CLOUD