Angular 9: What’s Angular and Angular 9 New Features
This is an introduction to Angular with answers to common questions. We’ll see what Angular is, the various versions of Angular and the new features of version 9.
> ✋✋ Join our Facebook group 👈 to discuss anything related to Angular development.
What is Angular 9?
Angular 9 is the latest version of Angular — a framework for building web and mobile client-side apps with JavaScript or more precisely a super-language of JavaScript called TypeScript built by Microsoft.
Angular 9 New Features
Performance and file size are big downsides of Angular vs. React, Vue or Svelte.js.
One major problem of the previous versions of Angular is the large size of the final bundle which impacts the download time and as a result the overall performance of the application.
Angular 9 brings a few new features most importantly, the Ivy compiler which provides a huge boost in performance.
In nutshell these are the new features of Angular 9:
- Smaller bundle sizes and augmented performance
- Faster testing
- Better debugging
- Improved CSS class and style binding
- Improved type checking
- Improved build errors
- Improved build times, enabling AOT on by default
- Improved Internationalization
- The Ivy compiler: The default use of the Ivy compiler is the most important feature of Angular 9, Ivy is what actually designed to solve the major problems of Angular i.e the performance and large file size
- Selector-less bindings support for Angular Ivy
- Support for TypeScript Diagnostics Format
- Support for more scopes in
providedIn - A New Type-Safe
TestBed.inject()Method Instead ofTestBed.get() - Improvements to differential loading
- AOT compilation everywhere
- Bundle sizes
- Globalisation
- Additional provider scopes
- Improved developer experience
- New debugging API in development mode
- Strict mode
- Improved component and directive class inheritance
- Latest TypeScript versions
- Improved server-side rendering with Angular Universal
- Improved styling experience
- Stabel Bazel release as opt-in option
- Angular Components
- Testing
Angular 9 makes it easy to use Google Maps and YouTube in your front-end apps.
Angular 9 added support for TypeScript 3.7 and improved the IDE and language service extension which will increase the productivity of Angular developers and help them spot errors when developing apps.
Many bugs have been fixed along with stability and performance issues.
Want more details, check out this link.
Ivy is enabled by default
In previous versions of Angular, we had to opt-in to Ivy. In version 9, we instead have to opt-out of Ivy if we want to fall back to View Engine. This is possible in both versions 9 and 10 to ensure a smoother transition from View Engine to Ivy.
Libraries can be AOT-compiled, but this is not recommended. The Angular team has a View Engine-to-Ivy migration plan which recommends only publishing JIT-compiled View Engine-compatible libraries for Angular version 9. The Angular compatibility compiler will upgrade View Engine-compatible libraries to Ivy when installed in an Angular Ivy application project.
// tsconfig.json
{
"angularCompilerOptions": {
"enableIvy": false
}
}// polyfills.ts
// Only used in multilingual Ivy applications
// import '@angular/localize/init';
Listing 1. Opting out of Ivy to fall back to View Engine.
If you experience problems with Ivy in your application or any of the libraries you depend on, you can opt out of Ivy and fall back to View Engine by clearing the enableIvy Angular compiler option and disabling @angular/localize as seen
The principle of locality
To compile a component in View Engine, Angular needs information about all its declarable dependencies, their declarable dependencies, and so on. This means that Angular libraries cannot be AOT-compiled using View Engine.
To compile a component in Ivy, Angular only needs information about the component itself, except for the name and package name of its declarable dependencies. Most notably, Ivy doesn’t need metadata of any declarable dependencies to compile a component.
The principle of locality means that in general we will see faster build times.
Lazy-loaded components
entryComponents declarations are deprecated as they are no longer needed. Any Ivy component can be lazy loaded and dynamically rendered.
This means that we can now lazy load and render a component without routing or Angular modules. However, in practice we have to use component render modules or feature render modules to link a component’s template to its declarable dependencies.
Libraries that are only used by a lazy loaded component are even bundled in lazy-loaded chunks.
Latest TypeScript versions
TypeScript versions 3.6 and 3.7 are supported in Angular version 9. Previous TypeScript versions are no longer supported. Refer to Table 1 to compare TypeScript compatibility between all Angular versions.
TypeScript version 3.6 introduces these and other features:
- Unicode support for identifiers in modern targets
- Improved developer experience for promises
- Stricter type checking of generators
TypeScript version 3.7 introduces these and other features that we can use with Angular version 9:
- Optional chaining operator (
?.) similar to the safe navigation operator for Angular templates - Nullish coalescing operator (
??) - Assertion functions (
assert parameterName is typeNameandasserts parameterName) - Top-level
await - Improved recursive type aliases
- Improved developer experience for functions such as function truthy checks
Improved styling experience#
Styling in Angular Ivy has been reworked. Combining static HTML classes with NgStyle and NgClass directives is now fully supported and easier to reason about.
CSS Custom Properties support#
As part of the Ivy styling rewrite, binding CSS Custom Properties is now supported.
An example binding looks like this:
<div [style.--my-var]="myProperty || 'any value'"></div>CSS Custom Properties have scope, so this CSS property would be scoped to the component’s DOM.
Angular Components
Angular version 9 comes with official components for YouTube and Google Maps. A clipboard directive and service are added to the Angular CDK.
Testing
The biggest surprise of the Angular version 9 release is the many improvements to testing. Long-standing performance issues are resolved, types are improved and new concepts are introduced.
One of the most important goals has been to keep backwards compatibility between Ivy and View Engine as much as possible.
Of course, Angular version 9 also includes bugfixes, deprecations, and breaking changes. Ivy also addresses some long-standing issues that we did not cover in this article.
Angular Ivy is an enabler for features to come. As we have discussed in this article, Ivy has already given us benefits for different use cases. However, the best features are to come in future versions of Angular. Which of the possible features that will be delivered in Angular versions 10 and 11, that is still to be decided.
We only discussed what is part of the public, stable Angular version 9 APIs. A few experimental APIs are part of this release, such as renderComponent, markDirty, and detectChanges. However, they are still subject to change.
With the deprecation of entry component declarations and lazy loaded components using render modules, we are one step closer to tree-shakable components and optional Angular modules.
Component features are also part of this release, but only exposed for internal use by Ivy.
The Angular Ivy version 9 release gives us improvements for bundling, testing, the developer experience, tooling, debugging, and type checking. Quite a good collection of features.
Improved server-side rendering with Angular Universal
Angular Universal version 9 is released with a Node.js Express development server to provide a realistic environment during development.
Also part of this release is an Angular CLI builder to prerender static routes using guess-parser, inspired by angular-prerender. We can pass a routes file to prerender dynamic routes (routes with parameters).
How do I get started?
We can add Angular Universal using the command ng add @nguniversal/express-engine. We can then use the builder command ng run myapp:serve-ssr to start the server-side rendering development server with live reload. Similarly, we can use ng run myapp:prerender to detect static and dynamic routes and prerender them.
Stable Bazel release as opt-in option#
Bazel version 2.1 is an opt-in build automation tool for Angular version 9.
https://indepth.dev/a-look-at-major-features-in-the-angular-ivy-version-9-release/
How do I get started?#
To enable Bazel, use ng add @angular/bazel or use the @angular/bazel schematics collection when generating an Angular workspace.
Make sure to follow the Bazel installation guide for your operating system.
Angular Versions
In Software Development, apps are versioned by following Semantic Versioning, which is simply a convention that everyone starts to follow.
Angular also follows semantic versioning which has a Major.Minor.Patch format. We increment a specific section when there is a major, minor or patch release:
Major Release — The Major part is incremented by one of the new features break backward compatibility,
Minor Release — The Minor part is incremented by one of the new features don’t break any existing features,
Patch Release — The Minor part is incremented by one 1 for releasing patch fixes.
The Angular team releases a new major version every six months and the last version, as of this time, is Angular 8:
You can follow the latest versions from the CHANGELOG.
Is Angular Frontend or Backend?
Angular is a front-end framework. You can’t use it to build a backend app. But if you already master the Angular concepts and want to be able to build backend apps, you may want to check Nest.js which is a backend framework based on Node and TypeScript and inspired by Angular.
What is the Newest Version of Angular?
The newest version of Angular is Angular 9 which is at this time of writing in Release Candidate.
Is Angular 9 Released?
Angular 9 is currently in the RC version and due to be released soon.
Which is The Most Stable Version of Angular?
Angular 8 is the current stable version.
Does Google Use Angular?
Angular is built by Google and is being used internally for building most public-facing applications and sites such as Google Cloud Platform and AdWords, as well as many internal tools.
