What's New In Angular 9 | 10 New Features & breaking changes
Whats New In Angular 9: In This video I have explained 10 New Features and Breaking Changes in Angular 9.
1. Default Ivy Engine:
2. Improves the bundle sizes:
3. Improved type checking:
4. Faster Testing:
5: AOT compiler on by default:
6: New options for 'providedIn':
7: Typescript 3.7 Support :
8. Better debugging:
9. Improvements to differential loading:
10. Improved CSS class and style binding:
1. Default Ivy Engine:
Angular 9 make a change in the core structure of the entire framework.
Angular applications will use the IVY renderer as the default compiler.
In Angular 8 Ivy renderer was already available to you but at an opt-in level.
means for using it you had to go your tsconfig.json file and "enableIvy" to true like below code:
====="angularCompilerOptions": { "enableIvy": true }
Now, with Angular 9, the Ivy renderer is the default Angular compiler.
so the Application built with IVY are more efficient.
2. Improve the bundle sizes:
In this Angular 9 feature, the bundle sizes are likely to decrease by 25-40 percent based on the app size.
3. Improved type checking:
The Angular 9 currently has three modes of checking the expressions and bindings
within the templates of the application and reports any type errors it finds.
The benefit is,The bugs can catch and fix early in the development process.
The other flags that the angular supports now are:
-fullTemplateTypeCheck — By activating this flag, the compiler will check
everything within your template (it can check ng-template , ngIf, ngFor and so on)
-strictTemplates — By activating this flag, the compiler will apply the strict Type
System rules for type checking.
4.Faster Testing:
One of the APIs for testing Angular apps is called TestBed.
Before this new version, it had a get function called TestBed.get()
============ TestBed.get(ChangeDetectorRef) // any
but now it has replaced with TestBed.inject()
=============TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef
TestBed.inject has resolved the type safety problem.
With The implementation of the TestBed, the framework’s core acceptance tests are about 40% faster.
5: AOT compiler is on by default:
In angular 9 build times has Improved significantly by enabling AOT by default .
6: New options for 'providedIn':
Now angular 9 provides us some additional options while creating an @Injectable service.
i.e is . platform— The providedIn option to 'platform' makes the service available in a special singleton
platform injector that is shared by all applications on the page.
@Injectable({ providedIn: 'platform' }) class MyService {...}
7:Typescript 3.7 Support:
Typescript 3.7 released on November 2019. and The angular 9 is updated to work with TypeScript 3.7.
8. Better debugging
Angular 9 uses some SPECIAL techniques and tools to debug THE applications.
With these SPECIAL techniques:-
-one can ask Angular TO access the instances of the components and directives.
-can trigger change detection with - applyChanges
-one can manually call methods and update state
9. Improvements to differential loading:
What is Differential Loading?:
differential loading means to send newer, flashier code to newer browsers and
stable legacy code to legacy browsers.
---one more time send newer code to newer browsers and legacy code to legacy browsers.
This generally translates into two things: modern syntax and polyfills.
Polyfills in angular are few lines of code which make your application compatible for different browsers
This way, newer browsers aren’t punished to load a massive bundle.
How does this work?
Modern browsers have the ability to interpret a module type in the script HTML tag
and to ignore a nomodule attribute. It looks like this:
script src="fancyModernBundle.js" type="module"
script src="legacyBundle.js" nomodule
10. Improved CSS class and style binding:
With THE Angular 9 feature, WE can manage styles through a clear, consistent order of precedence
which is not dependent on timing.
========================================
Visit my you-tube channel - / @aicoder2
Like my facebook page - / thecoolmentor
Join Angular 9 Group : / 808205929388989
Follow me on Instagram : / achyutanand93
Best Regards
The Cool Mentor(Aryan)