Angular is one of the most widely used front-end frameworks, and it has recently launched a major release, version 9.0. This version of Angular uses Ivy as the compiler, which was previously under preview.
Syncfusion always keeps up with the latest releases and we are very happy to announce that Syncfusion Angular components are compatible with Angular 9. Syncfusion’s release version 17.4.51 supports Angular 9 with the Ivy compiler.
Get started with Angular 9 by installing Angular 9 packages and Syncfusion 17.4.51 Angular packages. For instance, the Syncfusion Angular Grid package (with Angular 9 support) can be installed using the following command.
npm install @syncfusion/ej2-angular-grids@17.4.51
Let’s take a look at the updates available with Angular 9.
Ivy
Angular 9 uses Ivy as the default compiler. It has undergone several bug fixes and improvements. These are discussed in the following sections.
Size of the bundles reduced
With the Ivy compiler, items that are not part of the project have been excluded via tree-shaking. So they are not bundled, resulting in a reduction in the size of files.
The reduction in file size results in a faster loading of applications.
You can see a substantial difference in the bundles in the following images that a production build generated for an Angular 8 app versus an Angular 9 app for an Angular base source.
Angular 8
Angular 9
Test runs optimized
The Angular testbed used to recompile all components regardless of any changes made to the test. With Ivy, that burden has been eliminated. It doesn’t recompile all components unless there is a change.
This results in considerable improvement in the time taken to run a test.
Global object and debugging
Angular 9 provides better debugging with the global object available from @angular/core through ng. The ng object is made available when an app runs in development mode. Components, directives, and other instance information can be accessed and states can be updated through the applyChanges function.
The functions getComponent, getContext, getDirectives, getHostElement, and getInjector are all available in the ng global object.
Better type checking
Type checks are better handled with the Ivy compiler in Angular 9. Apart from the existing basic and fullTemplateTypeCheck, Angular 9 provides one more type check, strictTemplates. This check applies more strict type checks, like when you try to use an object that is not a part of the ngFor iteration, it throws an error.
Clearer build errors
Apart from the strong type check, Ivy also shows more detailed and readable error messages than its earlier versions.
ProvidedIn injector with new options
@Injectable now has two additional options apart from the root. When we inject a service, we will use ProvidedIn as ProvidedIn:’root’. Apart from the root, Angular 9 has two more options:
ProvidedIn:’Platform’: This makes the service available through the singleton platform injector across all applications.
ProvidedIn:’any’: This makes the service a single instance per module.
Intro of new components
Two new components have been introduced that can be installed in an application.
youtube-player
YouTube videos can now be rendered within an Angular application through the youtube-player component.
npm install @angular/youtube-player
google-maps
Google maps can now be easily integrated with Angular applications.
npm install @angular/google-maps
AngularForm changes
The ngForm tag, which was used with forms, is no longer available. It has been changed to ng-form.
TypeScript 3.7
Angular has been updated to support TypeScript version 3.6 and 3.7, which have several advantages and improvements.
How to update to Angular 9
According to Angular documentation, if you have an Angular version older than Angular 8, you need to first update it to Angular 8, and then to 9.
Update to 8.
ng update @angular/cli@8 @angular/core@8
And then to 9.
ng update @angular/cli @angular/core
More detailed information on the update is available on the Angular website.
Conclusion
I hope you now have a clear idea about the updates available with Angular 9. Once again, we are glad to announce that Syncfusion Angular components (17.4.51) are compatible with Angular 9. Try using our Angular components in your application development to reduce your development time. You can check out our sample from this GitHub location and ask any questions in the issues section.
If you have any questions about these features, please let us know in the comments below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are happy to assist you!
