Major Features in the Angular 9 Ivy

Major Features in the Angular 9 Ivy

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.

(Yes, Angular Ivy version 9 is now released!)

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 in Listing 1.

Opting out of Ivy in a server environment is a bit trickier. Follow the official guide to opt out of Ivy when using server-side rendering.

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.

Improvements to differential loading

When differential loading was introduced in Angular version 8, the build process was run once for the ES5 bundle and once for the ES2015+ bundle.

In Angular version 9, an ES2015+ bundle is output first. That bundle is then transpiled to a separate ES5 bundle. This way, we don’t have to go through a full build process twice.

AOT compilation everywhere

AOT is enabled by default in builds, the development server and even in tests. Previously, AOT compilation was significantly slower than JIT compilation so JIT was used for development and testing. With the build and rebuild time improvements in Ivy, AOT-compilation now has a great developer experience.

When we used JIT compilation in some phases of our process and only AOT compilation in the final build, errors were detected only when doing production builds or worse, at runtime.

Bundle sizes

Ivy can enable smaller bundles because it uses the Ivy Instruction Set which is a set of tree-shakable runtime rendering instructions. Our bundles will only include the rendering instructions we use in our projects.

This is great for use cases such as microfrontends, Angular Elements and web apps where Angular is not controlling the entire document.

However, the difference in our bundle sizes between View Engine and Ivy will vary based on the size of our application and the 3rd party libraries we use. In general:

  • Small and simple applications will see a considerable bundle size decrease.
  • Complex applications will see an increase in the main bundle, but a decrease in lazy loaded bundle sizes.

This means a considerable combined bundle size decrease for big applications, but could mean an overall increase in bundle size for medium-sized applications. In both cases, the main bundle’s size will probably increase which is bad for the initial page load time.

Globalisation

Locales (number formatting, date formatting, and other regional settings) can be dynamically loaded at runtime instead of having to be registered at compile time.

// main.ts
import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

loadTranslations({
  '8374172394781134519': 'Hello, {$username}! Welcome to {$appName}.',
});

Listing 2. Dynamically loading translations.

As seen in Listing 2, translated texts can also be dynamically loaded at runtime instead of being part of our bundles.

The translated texts could be loaded from a database or a file.

Multiple languages from a single application bundle

To change language, we have to restart the application, but we don’t have to serve a different application bundle.

This means that we can — with some setup — support multiple languages with a single application bundle on a single hostname.

Compile time inlining

A localised application will now only be compiled once. Instead of multiple builds to produce a bundle per language, a bundle per language is produced by replacing $localize placeholders with translated texts.

We now need to add the package @angular/localize to support localisation (multiple languages). The good news is that we no longer have to include Angular’s localisation code in our bundles if we only have a single language.

If we don’t use localised templates, the i18n* Ivy instructions are tree shaked from our bundle.

Localisable texts in component models and services

// app.component.ts
@Component({
  template: '{{ title }}'
})
export class AppComponent {
  title = $localize`Welcome to MyApp`;
}

Listing 3. A translation text placeholder in a component model.

A new internationalisation feature is that we can also include placeholders for translated texts in our component models as seen in Listing 3. Previously, this was only possible in templates.

Additional provider scopes

We have always had Angular module scope for providers. Angular version 6 introduced the 'root' provider scope and tree-shakable providers both for root and Angular module scope providers.

Angular version 9 introduces the 'platform' and 'any' provider scopes. Platform-scoped providers can be shared between multiple Angular applications in the same document. The 'any' provider scope will share a provider per module injector. For example one service instance for the eagerly loaded main bundle and one service instance for each lazy loaded Angular module.

Improved developer experience

Ivy enables the Angular Language Service to support additional checks while developing. This is a big improvement to the developer experience.

File path checks

The Angular Language Service continuously verifies component stylesheet and template paths.

Template type checks

Templates are type checked, according to the template type checking mode as described in the “Strict mode” section. Member names and types are verified, even in embedded views. What previously resulted in runtime errors are now detected while developing and building.

New debugging API in development mode

ng.probe has been replaced with a new debugging API in development mode. The most notable functions are ng.applyChanges and ng.getComponent.

Strict mode

Strict workspace schematic

The ng new workspace schematic now supports the --strict flag which defaults to off (false).

ng new my-app --strict

When enabled, this parameter adds a few strict TypeScript compiler checks as seen in Listing 4.

// tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noFallthroughCasesInSwitch": true,
    "strictNullChecks": true
  }
}

Listing 4. TypeScript compiler options enabled in a strict Angular workspace.

Curiously enough, this doesn’t add the same options as if we would simply set "strict": true in the compilerOptions object. Let’s compare the Angular workspace strict option to the TypeScript compiler strict option.

Both have these options in common:

  • noImplicitAny
  • noImplicitThis
  • strictNullChecks

The strict Angular workspace option additionally sets these options:

  • noImplicitReturns
  • noFallthroughCasesInSwitch

while the strict TypeScript compiler option additionally sets these options:

  • alwaysStrict
  • strictBindCallApply
  • strictFunctionTypes
  • strictPropertyInitialization

What’s more, the strict Angular workspace option doesn’t set template type checking to the new strict mode, only the previous full mode.

Strict template type checking

We have had the option to enable template type checking since Angular version 5 by setting "fullTemplateTypeCheck": true in the angularCompilerOptions object.

Ivy introduces strict template type checking as seen in Listing 5. When this new Angular compiler option is set, the value offullTemplateTypeCheck is ignored.

// tsconfig.json
{
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

Listing 5. Enable strict template type checking.

The strict template type checking verifies the types of property bindings and respects the strictNullChecks option. It also checks the types of template references to directives and components, including generic types. Template context variables’ types are also checked which is great for NgFor loops. The $event type is checked for event bindings and animations. Even the type of native DOM elements is verified with strict template type checking.

These extra checks can lead to errors and false positives under certain circumstance, for eaxmple when using libraries that are not compiled with strictNullChecks. To address this, strict template type checking has options to opt-out and tweak the checks. For example, strictTemplates is actually a shorthand for 8 different Angular compiler options.

Improved component and directive class inheritance

Selectorless base classes are now supported for directives and components. Some metadata is now inherited from base component and directive classes. This makes it easier to extend for example Angular Components and Angular Router directives.

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.

Table 1. Angular CLI, Angular, Node.js and TypeScript compatibility table. Open in new tab.

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 typeName and asserts parameterName)
  • Top-level await
  • Improved recursive type aliases
  • Improved developer experience for functions such as function truthy checks
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.

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.

Stable Bazel release as opt-in option

Bazel version 2.1 is an opt-in build automation tool for Angular version 9.

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 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.

Conclusion

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.

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.

Angular 9: Getting Ready To Update to Angular 9

Angular 9: Getting Ready To Update to Angular 9

Angular 9: Getting Ready To Update to Angular 9. We've all been waiting for Angular 9 for several years now. Not for Angular 9 specifically, but for the code that is getting released here. In this Angular 9 tutorial we will get you more familiar with Angular 9 than you ever thought you would be. More familiar with this specific release than you have ever been on a prior release.

We've all been waiting for Angular 9 for several years now. Not for Angular 9 specifically, but for the code that is getting released here. I am talking about Ivy. It is a new rendering engine (whatever that means) and will affect us somehow, even though our code should run the same as it did before.

In this event we will get you more familiar with Angular 9 than you ever thought you would be. More familiar with this specific release than you have ever been on a prior release.

Angular 8 Features: Angular 8 Released with New Features

Angular 8 Features: Angular 8 Released with New Features

Angular 8 Features: Angular 8 Released with New Features - Let's see the new Angular 8 features in more details.

Let's see the new Angular 8 features in more details.

Angular is the most popular platform for developing client-side (front-end) mobile and desktop web apps or SPAs. With the new release of Angular 8, we have a new set of powerful features that developers will appreciate which are added at many levels; the core framework, Angular Material library and the CLI. It has also enabled many major partner launches such as NativeScript (a framework for building native mobile apps with Angular), Angular Console (console for running Angular projects on your system),@angular/fire (for integrating Firebase with Angular) and StackBlitz (an online IDE for Angular).

In this post we are going to summarize some of the most important new features officially announced by the Angular Team.

This version is a major release that involves the complete platform, including the Angular core framework, Angular Material, and the Command Line Interface or CLI.

Angular 8 brings many new features, particularly for the tool-chain.

Angular 8 Features

As planned, Angular 8 was released and these are the new and most important features:

Preview of Ivy

With the release of Angular 8, a preview version of Ivy is now available for testing. Ivy is a new rendering engine that will produce smaller bundle sizes. But it's not recommended to start using it in production not just yet.

If you would like to start playing with Ivy, you can instruct the Angular CLI to enable Ivy in your project using the --enable-ivy switch:

$ ng new angular-project --enable-ivy

Web Workers

Thanks to Angular CLI 8, web workers are taken into consideration when building the production bundles which helps increase the performance. Angular CLI 8 provides now one bundle for every web worker.

Lazy Loading

The Angular Router has always supported lazy loading but now wiht Angular 8 the support for dynamic EcmaScript imports is added. For example:

{
    path: 'lazy',
    loadChildren: () => import('./mylazy/mylazy.module').then(mod => mod.Module)
}

Improvement of ngUpgrade

Angular 8 has also added new features to ngUpgrade which makes easier for developers to upgrade their Angular.js apps to Angular 8.

Angular 7 Features

v7 introduces many new changes in the Component Dev Kit or CDK and the Material Design library such as the Drag and Drop support and Virtual Scrolling.

In this release, the team has also focused on the Ivy renderer and how to make it smaller and faster by adding support for animation and improving the @NgModule integration etc. But Ivy is not yet ready for prime time.

These are the new features introduced by Angular 7 for developers.

Support for Node 10

Node v10 is the latest version of the Node.js platform which is used by the Angular CLI and most front-end development tools nowadays. v7 has now support for v10 of Node but v8 is also still supported.

Support for TypeScript 3.1

TypeScript 3.1 is the latest version of TypeScript, the official langauge for Angular. Angular 7 requires the latest version of TypeScript.

The CLI Prompts

Angular 7 introduces a new nice feature that allows the CLI to prompt users when executing commands like ng new or ng add. This enables users to make decisions for chosing the right built-in features to include or ignore at many points of the life-cycle of the project's creation and configuration.

As the Angular team is always focusing on making the CLI a powerful tool at the disposal of developers, the new CLI prompts feature is another step toward achieving that goal. More than often, when you use common commands like ng new or ng add, you don't have much control except what you pass as arguments in the first place. But what if you intend to add support for routing in your project but did not specify the --routing switch? You need to stop the command and start over. What, about when you want to avoid installing some unecessary dependencies? Aside from stopping the running command, you have no other options

But thanks to Angular CLI 7, this has changed. Now the CLI supports user prompts. For example, if you run the ng new angular-7-project, you'll presented with a nice prompt asking if you xant to include routing in your project. If you also like to use a specific stylesheet format? The CLI will present you with a list of choices between CSS, SCSS and SASS.

Not just that, you have complete control over the CLI prompts. You can simply add a schematic.json file to instruct the Angular 7 CLI to show or hide specific prompts.

CLI Prompts are also added to Angular Shematics which means developers of CLI tools can take advantage of it to prompt users for more information about customizations and act accordingly. This can be done using an x-prompt key to a Schematics collection.

Angular Performance: CLI Budgets by Default

The obvious fact is that Angular 7 is the best Angular yet! It's more performant and faster than any previou version including v6.

Upgrade from v6 to v7 consumes less time (no more than ten minutes according to the official docs). Also the upgrade process is more easier thanks to the work done in v6. Also the core framework has better performace with the new features such as the virtual scrolling detailed on below section.

But that's not the end of the story. Angular 7 gives importance to the final app bundle not just the framework by correcting a common production bug where the reflect-metadata polyfill gets added in the production build as well but it's only required in development so v7 will remove automatically from your final app's bundle.

For generating smaller bundles, new Angular 7 projects are using the Bundle Budgets in the CLI by default which were optional in v6.

Developers will get warnings when the initial bundle sizes more than 2MB and an error when it has a size of 5MB. But you can easliy change the default budgets from the angular.json file.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Virtual Scrolling: ScrollingModule

Virual scrolling is a technique used by popular UI libraries like Ionic for enabling developers to build efficient UIs. Loading hundreds of items could be very slow in most browsers, virtual scrolling takes performance in consideration and it's particularly useful for mobile apps when you need to scroll large lists without affecting the app's performance and by result the user's experience.

Now the Angular 7 CDK includes support for virtual scrolling via the ScrollingModule module. You can use the <cdk-virtual-scroll-viewport> to display large lists of data by only rendering the elements that actually fit on the visible part of the screen.

You can read more information from Angular Material docs.

Support for Drag and Drop: DragDropModule

With Angular 7, drag and drop support is added on the CDK. Items are rendered as long as the user is moving elements. Developers can use methods like moveItemInArray for reordering lists or transferArrayItemfor moving items between lists.

You can read more about drag and drop.

Support for <Slot> HTML Element with Angular Elements

<slot> is a new standard HTML tag that was introduced by the Web Component specification.

You can now write compnenets like the following example:

@Component({
  selector: 'a-component',
  template: `
    <header>
      <slot name="header"></slot>
    </header>
    <slot></slot>`,
  encapsulation: ViewEncapsulation.ShadowDom,
  styles: []
})
export class MyComponent {
}

You can then use this Angular component as a web component:

<a-component>
  <span slot="header">This is a header</span>
  <p>Hello Angular!</p>
</a-componeny>

New Features of Angular 6.1

Angular 6.1 is released in 2018-07-25 with multiple bug fixes and new features.

Angular CLI is also updated to Angular v6.1.1.

Angular 6.1 is the last planned minor version of Angular 6. That means, the Angular team will start working toward releasing Angular 7, the next major version.

Angular 6 major release has a strong focus on the developer toolchain i.e Angular CLI which introduces powerful features such as project workspaces and Schematics etc. Now Angular 7 is on the road after this latest minor version which will be focused on new features such as the Ivy Renderer.

Let's see the new features and how can make Angular developer lives easier.

This new minor release has over 70 bugfixes and 20 new features!

What's New with Angular 6.1?

Angular 6.1 brings many new features to Angular such as:

  • You can, now configure Angular Router to remember and restore the position of scroll by setting scrollPositionRestoration to enabled.
  • You can use ShadowDOM v1 API for View Encapsulation to specify how CSS is encapsulated in a component (encapsulation: ViewEncapsulation.ShadowDom).
  • You can use async/await with Jasmine etc.
  • You can use a new pipe that allows you to iterate over a map or object and display key/value pairs in the template.
  • Support for TypeScript 2.9: With Angular 6.1, you'll be able to use TypeScript 2.8 and TypeScript 2.9
  • Angular CLI v6.1.1: Angular CLI v6.1.1 is also released with many new features that you can see below.
Angular CLI v6.1.1 New Features
  • Support for TS 2.8 and 2.9,
  • Support for Angular 6.1,
  • The use of ES2015 Modules for all files,
  • The new --vendor-source-map switch that allows you to have source maps for vendor packages. This is useful for debugging your production packages.
Conclusion

This post is updated with the new Angular 8 features as v8 was just released.

Now the Angular team is working toward releasing Angular 9!

Welcome Angular 9 with New Features

Welcome Angular 9 with New Features

In this article, we discuss the new features of Angular 9, some breaking changes in Angular 9 means which has been changed in comparison to the previous version of angular.

As we all of us know that Google has just released its new version of Angular i.e. 9.0 just a week ago. Angular developers and the community members eagerly wait for the release of this version for a long time. Because, as announced by Google at the time of Angular 8 release, Angular 9 will be released with the features of the IVY renderer engine. So, the expectation is actually is very high for the IVY. Angular 9 is the first major release from Google in the year 2020 which is mainly focused on the toolchain and also making angular easier for the user to create different types of applications along with performance improvements. Except for this, this major version release also contains some new features and upgradation in respect of the previous versions including framework, Angular Material, Angular CLI, etc. Also, Angular 9 supports the typescript version 3.7. So with the help of a new typescript version, it is very much easy to code with faster subsequent build with the incremental flag, type checking for global this and generic type arguments.

New Features of Angular 9

Now it’s time to discuss the major changes made in the Angular 9.

TypeScript 3.7.x Support

Angular 9 supports the Typescript 3.7 or above version. So, if we want to use Angular 9 for our application, then we need to first upgrade the Typescript version to 3.7 or above.

Ivy Rendering Engine

The most important and expected features of Angular 9 is IVY render compiler engine. Ivy is the new Angular Compiler as well as will act as a new rendering pipeline. Ivy is the code name of Angulars’s next-generation compilation and rendering pipeline. The benefit of Ivy is that it will generate considerably small-sized bundles, also can perform incremental compilation easily. So, Ivy is the basis of future innovations in the Angular world.

  1. Ivy compiler and runtime offer many benefits over the previous compiler engine i.e. View Engine –
  2. It will provide a faster compilation.
  3. It will provide a smaller bundle size.
  4. With the help of Ivy, we can perform much faster testing operations.
  5. Provides improved CSS and style bindings
  6. Much more improved type checking in templates so that we can catch more errors at the build time and prevent the user to face those errors at runtime.
  7. Smaller bundle size compared to the current compiled bundled size.
  8. Also, the code generated by the Angular compiler is now much easier human to read and understand.
  9. The last but most favorite feature of me is that we can debug the templates.
  10. It provides improved build time and enables AOT mode for building by default.

In Angular 9, IVY is the default compiler engine for the build. If any reason, if we want to opt-out the IVY for the build process and want to continue with the previous compiler, View Engine, then we have to make the make changes in the TypeScript Configuration files as below -

{  
  "extends": "./tsconfig.json",  
  "compilerOptions": {  
    "outDir": "./out-tsc/app",  
    "types": []  
  },  
  "files": [  
    "src/main.ts",  
    "src/polyfills.ts"  
  ],  
  "include": [  
    "src/**/*.d.ts"  
  ],  
  "angularCompilerOptions": {  
    "enableIvy": false  
  }  
}   

Smaller Bundle Size

In Angular 9, the Ivy Compiler has been designed in such a way so that it can remove the unnecessary parts of the Angular which are not being used via tree-shaking structure and as a result, it will generate less code for each Angular component in compared to the previous versions. With these improvements, small-size applications and large applications can see the most dramatic changes in the application size.

  1. The small application which does not use many Angular features can be benefited mostly from the tree-shaking structure.
  2. The Large application with a large number of components can also be benefitted from the reduced factory size.

Angular Core Type-Safe Changes

In Angular 9, we can implement faster testing with the help of the Ivy renderer engine. The TestBed is one of the APIs used for testing any angular application. In the previous Angular version, it had defined as a get function called TestBed.get() which does not accept string value after Angular 8. This is one of the breaking changes in Angular 9. Since the Angular team dedicated to rollback in this new version as it always has a very powerful impact. To solve the type of safety problem, the Angular team provide a solution called TestBed.inject() and deprecated the get function.

TestBed.get(ChangeDetectorRef) // any  
  
TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef  

Now this improved TestBed API, inject function will perform the same type of work that the get function does earlier with the type-safe at the same time.

Modules with Providers Support

This option is mainly for library owners. If we have used ModuleWithProvider before Angular 9, at that time we may or may not have been strongly typing it. But now, from this version, we have to always use the generic ModuleWithProviders type to show our module type. In the earlier version, our declaration might be looks like as below -

@NgModule({ ...})   
export class MyModule { static forRoot(config: SomeConfig): ModuleWithProviders {    
  return {    
        ngModule: SomeModule,    
        providers: [{ provide: SomeConfig, useValue: config }]    
  };    
  }    
}  

But, now in Angular 9, this will look like as below -

@NgModule({ ...})    
export class MyModule {    
  static forRoot(config: SomeConfig): ModuleWithProviders<**SomeModule**>    
{    
   return {    
         ngModule: SomeModule,    
         providers: [{ provide: SomeConfig, useValue: config }]    
   };    
 }    
}   

Changes in Angular Forms

In Angular 9, there are some changes also make in the Angular Form Version. First of all, In Angular 9 is no longer exists as a form selector to use Angular Form. We need to use to access the Angular Form in our component. Secondly, FormsModule.withConfig has been removed and now we can use FormsModule directly.

Dependency Injection Changes in Core

In the case of dependency injection, Angular 9 comes with much more improvement and functionalities. So, when we will create an @Injectable service in Angular 9, we must choose whether it should be added to the injector. In addition to the previous root and module options, now we have two more additional options –

  • platform – Mentioning providedIn: ‘platform’ option makes the service available in a special singleton platform injector which will be shared by all applications on the page.
  • any - Mentioning providedIn: ‘any’ option provides a unique instance in every module (including lazy modules) that injects the token.

i18n Improvements

Angular as a JavaScript framework has been now totally supported by the internationalization and with the help of the Angular CLI, we can produce basis codes that will help us to create converter files so that we can develop an application in multiple languages. This method also further refactored by the Angular team on the Ivy engine to make it easier to implement compile-time inline.

Need for Faster Mobile Apps

As mobile usage is growing strongly around the world and the quarter of the website traffic is made up of smartphones and other mobile devices. A significant percentage of these mobile devices have access to web pages from slow internet connections. It's important to decrease downloadable resources and increase mobile user experience, but such improvements can be difficult. Ivy helps in speed application startup by reducing the size of JavaScript classes.

Service Worker Updates

In this Angular 9 version, for service workers, the deprecated versioned files option in the service worker asset group config has been removed. This means that your ngsw-config.json file that looked like this:

"assetGroups": [    
  {    
    "name": "test",    
    "resources": {    
      "versionedFiles": [    
        "/**/*.txt"    
      ]    
    }    
  }    
]  

Now, in Angular 9 it looks like as below -

"assetGroups": [    
  {    
    "name": "test",    
    "resources": {    
      "files": [    
        "/**/*.txt"    
      ]    
    }    
  }    
]  
How to Upgrade in Angular 9

To upgrade any existing Angular 8 or previous application to Angular 9, we need to perform the below steps –

  1. Angular 9 use TypeScript 3.7 so install TypeScript 3.7
  2. You need to use Node 12 or Later
  3. Now execute the upgrade command of Angular CLI -> ng update @angular/cli @angular/core

For getting better update experience, Angular recommended updating first to the latest version of Angular 8 with the below command -

ng update @angular/[email protected] @angular/[email protected]  

Then, we can run the update command of Angular 9 -

ng update @angular/cli @angular/core

Or, alternatively, you can check your upgrade process from the below URL links - https://update.angular.io/

After a successful update, check the Angular version with the below command –

ng version  

Conclusion

In this article, we discuss the new features of Angular 9. We also discussed some breaking changes in Angular 9 means which has been changed in comparison to the previous version of angular. Also, we discussed some new features about Angular 9. I hope, this article will help you. Any feedback or query related to this article is most welcome. Thank you!