What Are The Features & Differences Of Angular 9 and Angular 8?

Angular is the trending web technology and it helps web developers in creating better front end development. Angular has updated a number of versions and the latest one is Angular 9. In this article, We will discuss Angular 8 vs Angular 9, it’s comparison, features, performance results, code examples etc.

Before seeing the full article, let’s see a quick comparison table of Angular 8 vs. Angular 9.

Differences between Angular 8 and Angular 9

Angular 8	Angular 9
Ivy Engine	Default Ivy in v9
Web Workers	Phantom Template Variable Menace
Improvement in ng-upgrade	Service Worker Updates
Lazy Loading	Dependency Injection Changes in Core
Support for Node 10	i18n Improvements
CLI workflow improvements	More reliable ng update
Upgrading Angular Material	API Extractor Updates
TypeScript 3.4 support	Typescript 3.7 support
Improved Web Worker Bundling	ModuleWithProviders Support
Differential Loading	Component Harness

Google Trends Popularity Graph Of Angular

Below you can see the Google trends popularity graph of Angular web framework and there is doubt that it is the most used and most popular framework for front-end development.

To stay dynamic and alongside each other with the maturing requirements of the customer base and new projects, the steady inflow of the niche technology, platforms, and frameworks necessitate timely upgrades. In this blog post, we are chipping in the differences between the features, alterations, with the comparison of angular 8 and angular 9.

Angular 8 New features

Angular 8 has come up with many workflow and performance enhancements. And a lot has transformed into the framework with the hood in terms of tooling. Angular 8 introduced ivy rendering with an upgraded angular core framework. It also came up with Angular Material and the useful Command Line Interface.

1. The Ivy Engine

Ivy is the most significant part of this release, and it took significant efforts for release. Ivy is an innovative rendering engine that will enable smaller bundle sizes. However, it is not suggested to commence using it in production stages.

2. Web Workers

Coming to Web workers, they are quite crucial for enhancing the parallelizability and the pace of your application. Angular 8.0 offered support to CLI, which offers one bundle for each web worker, and they do it by creating code off the core thread.

3. Lazy Loading

It is fundamentally based on the theme of Angular Routing and Angular 8 added backing for dynamic EcmaScript imports in the specific router configuration as it assists in bringing down the size of big files by lazily loading that is needed.

4. Angular Firebase

Angular 8 formally added support to Firebase, and currently deploying an Angular application to Firebase is simple, and it doesn’t consume much of the time utilizing Angular CLI, Service Worker.

5. Differential Loading

The Angular 8 applications will be more performant due to the functionality of differential loading, and two bundles are built for a production build. The bundle for the fresh browser will be updated with ES2015+ and the old browser for the ES5 version. The perfect or accurate bundle will routinely and automatedly load through the browser with fresh ES6 modules existing in the new browser. Further, ng builds command occupied with the prod flag will enable bundling everything innovatively.

6. Opt-In Usage Sharing

No in Angular 8, one can switch amid IVY as well as the usual View engine build. It facilitates opt-in to sharing telemetry regarding your Angular CLI utilization through Angular. It can gather data such as commands utilized and the build pace if users enable them, which will assist developers to enhance their capabilities in the coming time.

7. Angular CLI Builders

CLI Builder API is secure and obtainable to developers who want to tailor the Angular CLI by accumulation or amending the commands.

Which are the functionalities available in angular 8?

• AngularJS API migration enhancements with $location service
• Upgraded Typescript to 3.4.x
• The router backward compatibility in Angular
• The packages are deprecated into two the @angular/platform-webworker as well as @angular/platform-webworker-dynamic
• @angular/http is disconnected from the packages
• ng-build, ng-test, and ng-run are capable of being extensive with third-party libraries along with tools
• Dart-sass is intended for Sass files
• ContentChild and ViewChild decorators will have a new preference known as static

React vs Angular: Which Is A Better JavaScript Framework?

Why Should You Use AngularJS?: Key Features And Reasons

Angular 9 features and major updates

Angular 9 was introduced in the month of Feb 2020, with some new angular version features. The core of this version is the default IVY compiler, which creates the main structure of the complete framework.

1. IVY Presented as the Default Compiler

The default IVY compiler trims down the overall bundle size by 25% to 40%, which facilitates superior performance. This allows the developers to lessen the size of files and make it friendlier. IVY checks-out the required bindings within the given templates of applications and reports problems it finds-out. This lends a hand to detecting bugs way earlier in the development procedure. Further, it helps to compile the code-bases with the new tools and techniques debugging the in-hand applications. The IVY handles the required style binding without being reliant on any timing. Angular 9 sustains the drawbacks without losing on the performance levels.

“angularCompilerOptions”: { “enableIvy”: true }

2. More Consistent ng-update

The ng update is the fundamental update to the existing CLI framework with the benefits of newer updates automatedly. This will also facilitate giving updates and insights about the migration.

ng update

3. API Extractor Updates

Angular relies on numerous services and libraries that are tough to monitor and track. The API landscape of these libraries assists in finding the missing updates so that they interact quickly.

4. Fresh and new alternatives for ‘providedIn’

Offer specific options while building services in Angular.

• Platform

The providedIn: ‘platform’ enables the service obtainable in a unique single platform that is shared by every application on the given page.

• Any

Delivers an exclusive instance in all modules, by instilling the required token.

5. IDE and Language Service Enhancements

Angular language service extension comprises valuable extensions for building up the development practice with Angular. The extensions consist of Angular snippets, ESLint, as well as the debugging extensions. Along with these, the stability and performance level problems have even been fixed-up.

6. Typescript 3.7 Updates

The typescript 3.7 was introduced in November 2019, and it gave a key hit to the angular 9. The platform is upgraded to work with the Nullish coalescing and elective chaining feature of the in-hand Typescript 3.7. This feature assists in remaining in sync with the given environment.

7. Component Harness

Angular 9 offers substitute ways to test elements to ensure that the unit tests are accurately audited and fewer frail. Angular finds the element on its own. The existing compiler and runtime have been upgraded, so there is no longer a requirement to spot this in the “entryComponents” array.

8. Phantom Template Variable Menace

In the earlier versions, phantom variables were not cited in the template’s associated element or component. Building the phantom variables can typically threaten the given applications. With this new version, the compiler error is showcased, when a template variable is built that has not been categorized in an element or component.

9. Angular Core Type-Safe Alterations

One of the APIs for testing Angular applications is known as TestBed. Before Angular 9, there was a get function TestBed.get() that congested taking string values after Angular 8. This was a breaking amendment, which was roll-backed. To solve the issue, they came up with a solution known as TestBed.inject() and criticized the get function. But now the TestBed API has been enhanced and made inject function work the same as get function.

TestBed.get(ChangeDetectorRef) // any

TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef

Most Popular Programming Languages 2020

Inquire Us For Angular App Development

What’s new in the latest Angular 9 version and How Angular 9 is better?

• Selector – Fewer directives were enabled in the older versioning; however, they were missing in the Ivy preview in the present Angular 8 version. This has now been blended to Angular 9.
• The AOT builds will be visibly speedier, making sure an essential transformation in the overall performance of compiler.
• With IVY, we see an enhancement in the build error. It offers less time for the builds to inclusive enabling of all the error communications, which turns messages easy to read.
• The framework utilizes exceptional techniques and tools to debug the apps by themselves.
• The deprecated versioned file alternative for service workers in the service worker skill group config has been isolated.
• The ViewEngine in the current version translates the templates, elements, as well as components into usual HTML and JavaScript for the browser, can understand, and showcase them easily.

Performance Result of Angular 8 and 9

The new rendering engine utilized in Angular 9 as compared to Angular 8 i.e. IVY, and due to this, there are many radical performance enhancements seen. Further, to test the performance of Angular 9 with Angular 8, we at Technostacks performed the outcomes with some applications.

The web application consisted of information regarding the dist folder sizes along with some images of the Google Lighthouse Outcomes with the package.json file, which comprised all the libraries for the applications.

Build Size: Both apps had the same content and information and Angular 9 performed better in compressing all the build files, and produced the dist folder with all the processes file sizes whereas Angular 8 created larger build files, which means Angular 9 created less build file sizes when matched to Angular 8 offering better performance outcomes.

Google LightHouse Performance Outcomes: The team at Technostacks conducted numerous tests, and the average score of Angular 8 was less than Angular 9 for the mobile-based versions. Now coming back to the Desktop version, the average score remains almost similar, however, still, Angular 9 performed better than Angular 8.

Key Takeaways

Being an AngularJS Development Company, we at Technostacks have swiftly broken down most of the functionalities and upgrades on the newest versions of Angular. Also, Angular 9 has assisted our developers in making front-end development superior in diverse projects. You should discover, explore, and report the bugs or problems you find on your in-hand project so that transformation can be easily implemented.

What's New in Angular 9

In this article, we'll explore what's new in Angular 9. Although the versioning change from 8 to 9 seems like a big step, v9 is an evolutionary release (and includes mostly bug fixes). However, there are several interesting new Angular 9 features.

Here' we'll discuss:

1. Built-in Angular Features
2. Mature Development with Angular
3. Understanding Angular View Engines
4. Angular Ivy Solves Long-Standing Problems
5. Angular Ivy and Mobile
6. Selector-less Directives
7. Angular Diagnostics Improvements
8. Internationalization with Angular Ivy
9. DI and Type-Safe in Angular 9
10. Dependency Injection Changes in Angular Core
11. Angular Benchmarks (Angular 8.2.7 vs. 9.0.0-next.5)

Angular is one of the most prominent open-source frameworks for building web and mobile applications. Developed by Google, Angular has evolved over the years into a comprehensive development framework that includes all of the tools and components required to build a web app. Angular follows a clear roadmap, with a new major version of Angular released every six months. The Angular team works thoughtfully so that the API doesn’t need to change (or at least not as drastically as it did from Angular 1 to 2). This is a good thing, it keeps things up-to-date with the latest best practices and latest features supported by TypeScript or JavaScript.

We've covered Angular 8 in other articles, along with tips for using our Wijmo Angular UI components and other aspects of development with Angular. Here, we’ll start by looking at one of the problems that plagued previous versions of Angular: large bundle files that have negatively impacted download times and, as a consequence, application performance.

The big new feature we'll dive into is the Ivy compiler. We'll explain what Ivy does and why it's actually an important feature for the future of Angular. Spoiler alert: it solves some of the problems with large bundles and application performance.

We'll touch on a few other new features, including selector-less bindings and internationalization support. You'll see why we're calling this an evolutionary release rather than revolutionary.

Finally, we’ll run some benchmark tests to compare performance between Angular 8 and a pre-release version of Angular 9. The latest Angular 9 Release Candidate (9.0.0.rc-9) was posted recently, and we’ve updated our benchmarks to include this latest release.

JavaScript Bundles and Performance

One of the ongoing problems with previous Angular versions is the relatively large file size of the app — more precisely, the file size of the generated JavaScript bundles. If you compare Angular to other libraries such as React or Vue.js, the Angular app is significantly bigger.

At runtime, you probably won’t feel the difference. While Angular runtime performance is good, the loading can take longer because even a simple app can be relatively large.

The size of the JavaScript bundles also hints at another problem: there's more to learn with Angular because Angular is a complete framework with many built-in developer tools, while other JavaScript libraries are more focused on components.

So what could the Angular team do to mitigate the problems stemming from the large bundle files in earlier Angular versions?

Understanding Angular ViewEngine

Before Angular 8, the framework relied exclusively on ViewEngine (sometimes referred to as the "VE") to build and render code in browsers. Angular components are written using the TypeScript language. TypeScript is a superset of JavaScript, and we use a compiler or "transpiler" to render TypeScript into a dialect of JavaScript that runs in the browser. Angular historically has relied on ViewEngine to do this transpiling from TypeScript code into JavaScript.

The Angular ViewEngine takes the templates and components and translates them into regular HTML and JavaScript so that the browser can interpret and display them.

Angular Ivy Solves Long-standing Problems

One of the most significant features that shipped with Angular 8 was the opt-in Ivy preview. Ivy is Angular’s new internal build and render pipeline. The renderer is the engine that takes the instructions you input into the Angular components with the templates and then translates them into instructions that change the DOM (Document Object Model).

The Ivy compiler is hidden away, and replacing ViewEngine with Ivy does not change the way you work with Angular. But this change does have a significant impact on the code that’s being generated.

The Angular 8 preview lets users play around with Ivy. With Angular 9, Ivy is the standard renderer. If a renderer is more efficient or easier to implement, that means you can ship less code because fewer instructions are required, and that’s the purpose of Ivy.

Ivy yields much smaller JavaScript bundles, so Ivy solves Angular’s bundle weaknesses. Ivy will be a game-changer because it brings Angular applications to a whole new level in terms of performance and size.

Ivy doesn’t change the way Angular is used, but it does change how the app is generated. The Angular team has focused on initiatives like the differential loading of modern JavaScript, which shipped with Angular . This means that different polyfill bundles are created and deployed together. At runtime, only the polyfills that are required for the specific browser are loaded, thus leading to less code being downloaded.

Angular Ivy and Faster Mobile Apps

Smartphones and other mobile devices account for about half of the website traffic worldwide. A considerable percentage of these mobile devices access web pages from locations that suffer from slow internet connections.

Developers can redesign existing apps to reduce the size of the downloadable assets and enhance the mobile user experience, but these changes can be difficult, expensive, and introduce unforeseen risks to their projects.

By reducing the size of JavaScript bundles, Ivy becomes a welcome improvement for developers trying to speed up application startup.

Putting Ivy to Work

In Angular 9, the new Ivy compiler will finally be the default, so Angular apps built with Ivy will be faster and more efficient.

In Angular 8, Ivy was optional, so you had to explicitly enable it by adding the following lines to the tsconfig.json file in the project folder:

"angularCompilerOptions": {  
  "enableIvy": true  
}

And then you had to run the compiler by executing the ngc command inside the project folder:

node_modules/.bin/ngc

In Angular 9, setting the enableIvy option in the tsconfig.json file is no longer needed since the Ivy renderer is the default.

Selector-less Directives

One feature missing from the Angular 8 Ivy preview that had been available in ViewEngine was the ability to use selector-less directives as base classes.

With Angular 9, this feature has been added to Ivy so that developers get the advantages of Ivy compilation, but don’t miss previous functionality.

Consider the following pattern showing a decorated child class that inherits a constructor from an undecorated base class:

export class BaseDir {  
  constructor(@Inject(ViewContainerRef) protected vcr: ViewContainerRef) {}  
}

@Directive({  
  selector: '[child]',  
})  
export class ChildDir extends BaseDir {  
  // constructor inherited from BaseDir  
}

Angular ViewEngine already supports this pattern. Still, it was missing in Ivy's initial release: without the @directive annotation identifying the BaseDir class as a directive, the Ivy compiler didn't interpret information about its constructor parameters.

Version 9 will now ship with his feature so that it becomes consistent across all of the Angular codebase.

Angular Diagnostics Improvements

Previously, the Angular Compiler generated both native TypeScript diagnostics and its own internal API diagnostics. But TypeScript diagnostics have benefited from recent enhancements, none of which were implemented in API diagnostics.

Instead of supporting multiple formats, Angular 9 will simplify the process by converting all Angular TypeScript Compiler (ngtsc) diagnostics to the same TypeScript Diagnostics format.

Version 9 will also keep apps from running into potential binding issues by using the schema registry to check DOM bindings. In addition, consistent template diagnostics will be usedto support the generation of highly descriptive error messages.

Internationalization with Angular Ivy

Another Ivy enhancement relates to internationalization.

You can use the Angular CLI to generate most of the standard code necessary to create files for translators and to publish your app in multiple languages.

Bon! Bueno! Schön! Bravo!

For example, consider an application with this HTML title in English:

<h1>Hello world!</h1>

You can add the i18n attribute to mark “Hello world!” as translatable text ("i18n" is a shortening of "internationalization" — "i", 18 letters in between, and "n."):

<h1 i18n>Hello world!</h1>

After you have configured your app to use i18n, you can run the xi18n command to extract the localizable text into a file. You can see a snippet of a generated messages.xlffile below:

<trans-unit id="a05c3a315a6ee3e6ad4733a1f72e8d16775810ca" datatype="html">  
    <source>Hello World!</source>  
    <target/>  
</trans-unit>

Then, you can copy the messages.xlf file to the messages.es.xlf file below and change it to build the app for Spanish (es) locations with the translated content:

<trans-unit id="a05c3a315a6ee3e6ad4733a1f72e8d16775810ca" datatype="html">  
    <source>Hello World!</source>  
    <target>¿hola, qué tal?</target>  
</trans-unit>

In Angular 9, the i18n code has been refactored to provide a better platform for adding compile-time inlining.

Dependency Injection Changes in Angular Core

Now let's take a look at some smaller, but no less welcome, updates and improvements we'll see in Angular 9.

Angular Core has some enhancements too. For example, Angular 9 adds dependency injection support for the providedIn value:

@Injectable({  
  providedIn: 'platform'  
})  
class MyService {...}

Angular 9 extended the vocabulary for the providedIn property to also include the 'platform' and 'any' scopes.

Type-safe Changes in Angular Core

Angular 9 offers modified TestBed (the main unit test API for Angular apps) to replace the old get function with the new inject method. The get method still works, but is deprecated. TestBed.inject is the preferred option starting with Angular 9:

// This code still works, but it's deprecated:  
TestBed.get(ChangeDetectorRef) // returns any

// inject() now replaces get():  
TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

Currently, TestBed.get is not type-safe. Fixing TestBed.get would introduce a massive breaking change, so the Angular team decided to replace it with TestBed.inject.

Language Service Improvements

The Angular 9 Language Service for Visual Studio Code and WebStorm will benefit from some improvements. For example, URL definition will become more consistent. Style URLs will be checked in the same way as template URLs.

Since building is an expensive task and should not be bundled with testing scripts, Angular 9 will introduce a convenience script so that building the distribution doesn't have to happen on the repo root. Language Service integration tests should reinstall the Angular distribution every time it is built.

Diagnostics will also be improved in the Angular Language Service. For example, TypeScriptHost will be able to differentiate severity logging by log, error, and debug methods. Plus, template URLs and style URLs that do not point to actual files will now be diagnosed as such by the Language Service.

In the future, Language Service implementation can be further improved with enumerating directive properties and unifying common logic.

API Extractor Improvements

Angular depends on many software libraries that evolve separately. Angular users can miss out as potential bugs are resolved and new features are implemented in these libraries.

In response, Angular 9 will update API Extractor to the newest version. Angular uses Bazel, an open-source tool that enables building automation and software testing. Bazel references API Extractor, a tool invoked at build time by the Angular toolchain. It leverages the TypeScript compiler engine to detect the project's exported API surface, produces a contracts report, points out missing exports and inconsistent visibility, and generates API documentation.

Maybe not the most exciting update, but really it's the details like regular improvements to the Language Service and API Extractor that make a framework productive and efficient when we're coding apps.

Benchmarking Angular 8 vs. Angular 9

We promised a head-to-head match-up, and now it's time to deliver.

Angular 8 already allowed smaller and faster apps compared to version Angular 7. Since the Angular team didn't stop working on performance improvements, many of us waited anxiously to see how Angular 9 would compare, particularly with the addition of the Ivy as the default compiler.

This benchmark was run with a new application created with Angular CLI:

ng new angular-new

Then we built it with the production build option, again with Angular CLI:

ng build --prod

The benchmark was done by Google Chrome's built-in Audit functionality, using the following test settings:

1. Device: Mobile
2. Audits: Performance
3. Throttling: Applied Slow 4G, 4x CPU Slowdown

Angular 8.2.7

A production build with Angular 8.2.7 resulted in a main.js of 246KB for ES2015 browsers. Here we can see a screenshot of the performance results:

Angular 9.0.0-next.5

A build with Angular 9.0.0-next.5 yielded a slightly small main.js file at 214KB. That's a 13 percent improvement from Angular 8.

Here are the Angular 9.0.0-next.5 benchmark results:

These results are partly a reflection of the performance improvements enabled by the Ivy renderer in Angular 9.

Update: Angular 9.0.0-rc.9

Now that we’re closer to the final Angular 9 launch, let’s take another look and see if bundle size and performance have changed.

The total ES2015 bundle size of our app is now 177KB - significantly smaller than both Angular 8 and the previous Angular 9 pre-release version we tested. Next, let’s look at performance:

Although the audit score is one point lower than before, this doesn’t represent a meaningful drop in performance.

With better performance that Angular 8 and a much smaller app bundle size, most Angular developers will want to update their apps to use Angular 9 after its final release.

The Future of Angular

With Angular 9, the community can benefit from smaller, high-performance applications, and a better developer experience. Developers also now have clear syntax and clear project structure.

What changes will be incorporated into Angular in the future?

The Angular team has indicated that there's no need for drastic API changes. Will there be more deprecations, and maybe an alternative way of creating components? An enhanced developer experience is always something to hope for. In the future, perhaps we'll be spending more time on developing components and directives and less time in trying to glue them together.

Looking for framework-agnostic UI components? GrapeCity has a complete set of JavaScript UI components, including data grids, charts, gauges, and input controls. We also offer powerful spreadsheet components, reporting controls, and enhanced presentation views. We have deep support for Angular (as well as React and Vue) and are dedicated to extending our components for use in modern JavaScript frameworks.

Supporting the Ivy Compiler

We have been working closely with the Angular team to make sure we support the new Ivy Compiler so our customers can use Angular v9. The Angular team helped us with some recommendations in our module packaging and fixed some compiler issues as well. During this process, we also migrated to use the Terser minifier for better parsing in the Ivy Compiler based on the Angular team's recommendation. Read more about how Wijmo Supports Angular 9 and the Ivy Compiler.