Angular’s new version is released with Angular Material and Angular CLI. Angular is released with improved application performance. Angular Material and CDK have new features like Virtual Scrolling and Drag and Drop. CLI prompts the new feature in Angular CLI.
Angular Features And Updates
- New ng-compiler
- CLI prompts
- Angular DoBootstrap
- Improved Angular performance
- Ivy renderer
A new ng-compiler
The new compiler is capable of excellent 8-phase rotating ahead-of-time(AOT) compilation. As a result, most Angular applications can expect a massive reduction (95-99%) in bundle sizes.
When the actual size of the Angular bundle becomes less than what most languages would take to store the string Angular, you know it’s significant progress.
The ngcc Angular node_module compatibility compiler – The ngcc is a tool that “upgrades” node_module compiled with non-ivy ngc into the ivy-compliant format.
Angular Compatibility Compiler(NGCC) will convert node_modules compiled with Angular Compatibility Compiler (ngcc) into node_modules which appear to have been composed with TSC compiler transformer (ngtsc), and this compiler change will allow such “legacy” packages to be used by an Ivy rendering engine.
CLI prompts
The CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support.
And the great news, it’s customizable! Add a schematic.json using the Schematic CLI, and you can tell the Angular CLI, which prompts to execute.
Angular DoBootstrap
Angular added a new lifecycle hook that is called ngDoBootstrap and an interface that is called DoBootstrap.
// lifecycle hook
class AppModule implements DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef) {
appRef.bootstrap(AppComponent);
}
}
Application performance
The Angular team has discovered that many developers included the reflect-metadata polyfill in the production.
So that is only needed in the development and not in production. So they decided that to fix this, part of the update to v7 will automatically remove it from your polyfills.ts file and then include it as a build step when building your application in JIT mode. So lifting this polyfill from production builds by default.
The Ivy rendering engine is a new backward-compatible Angular renderer mainly focused on
- Speed Improvements
- Size Reduction
- Increased Flexibility
This Ivy Rendering feature will reduce the code size and makes compilation faster.
The Angular upgrade is faster than its previous version (less than 10 minutes for many apps, according to the official announcement).
The angular framework is rapid and the virtual scrolling CDK module detailed above makes apps run with better performance.
New projects are defaulted using Budget Bundles, which notify you when your app reaches size limits.
By default, you get warnings when you reach 2MB and errors at 5MB. And when you need a little more space, jump into your angular.json and adjust as necessary.
The Angular Material CDK
ScrollingModule
As many mobile frameworks have started to move toward dynamically loading data such as images or long lists, Angular has followed suit by adding the ScrollingModule to allow for virtual scrolling.
As elements gain or lose visibility, they are virtually loaded and unloaded from the DOM. Performance is significantly increased in the user’s eyes.
Next time you have a potentially large list of items for your users to scroll, stick it in a cdk-virtual-scroll-viewportcomponent and take advantage of the performance boost!
DragDropModule
Now you can remain entirely within the Angular Material module and implement drag-and-drop support, including reordering lists and transferring items between lists.
The CDK includes automatic rendering, drag handlers, drop handlers, and even the ability to move data.
Don’t you like the standard drag animation? No sweat. It’s Angular; it’s yours to override.
Ivy Renderer
The next generation ready-when-it’s-ready renderer…still isn’t quite ready. The Angular team won’t commit to a final timeline, but the development is still active and progressing.
They note backward compatibility validation is beginning, and while no official team member has commented, a few fervent followers of the commits are expecting a complete beta to launch sometime during V7’s lifespan with a possible official release alongside version 8.
Follow the progress yourself on the GitHub Ivy Renderer issue under the official Angular repo.
The best news? They fully expect Ivy to be released in a minor release as long as it’s thoroughly tested and validated. So who knows? Maybe we’ll see it in v7 after all.
Dependency Updates
The 7.0.0 release features updated dependencies on major 3rd party projects:
- TypeScript 3.1
- RxJS 6.3
- Node 10 — support for Node 10 has been added, and support for 8 continues.
That’s it.
