What’s the Feature of Angular 7.0
Angular 7.0 is here. Continuing the trend set by earlier releases, migrating to Angular 7.0 is easier and faster. The latest release of the TypeScript-based open-source front-end web application platform is developed by Angular Team at Google along with a community of individuals and organizations.
Though there are a few new features added to the arsenal of Angular for the 7th major release, it gets some fascinating tooling changes and performance-enhancement features. Like with earlier versions of Angular, 7.0 is backwards compatible with previous releases.
New in Angular 7
Here is a list of most changes introduced to the 7th major release of Angular:
- Angular CLI v7.0.2
There are several great features boasted by the new Angular CLI v7.0.2. These are:
- While typing commands to the likes of ng-add, ng-new, or @angular/material, CLI will prompt users to help discover inbuilt features like routing and SCSS support
- Creating new projects takes advantage of Bundle Budgets in CLI
- Angular Compatibility Compiler
The new Angular Compatibility compiler is added to transform node_modules compiled with ngc to ones that are compatible with the new Ivy renderer. The newly converted node_modules appear to have been compiled with ngtsc rather than ngc. All of this is done so that such legacy packages can be used by the Ivy rendering engine without compatibility issues.
Angular DoBootstrap
Angular 7 brings ngDoBootstrap, a new life-cycle hook, and DoBootstrap, a new interface. These are used for bootstrapping modules that require doing bootstrap of a specific component.
Angular Elements with Slot
Meant for Angular Elements, Angular 6.1 introduced ShadowDom. In Angular 7, support for content projection using web standard for custom elements is available. Also, a new standard HTML element, dubbed slot, is introduced by the Web Component Specification. This new feature enables components with a template.
Angular Material & the CDK
The Material Design of Angular received a major overhaul in 2018. Further enhancements to the same is made in the 7th major release of Angular. For dynamically loading as well as unloading parts of the DOM in order to build high-performing, large lists of data, virtual scrolling (discussed in detail later in the list) is now available.
Furthermore, apps can be equipped with a drag-and-drop ability (also discussed later in the article) by means of importing the DragDropModule or the ScrollingModule.
Application Performance
Prior to Angular 7, developers were including the reflect metadata polyfill in production. This is unnecessary as it is required only during development. So in Angular 7, polyfill is removed from production by default. For achieving the same, Angular 7 will remove the reflect metadata polyfill from the ts file and then include it when building the application in JIT mode as a build step.
In order to speed up the performance, new applications will warn as soon as the initial bundle crosses the 2 megabytes limit and will error at 5 megabytes. Don’t like the idea? Worry not, as you can change the default setting in the angular.json file. These limits are meant for warnings that can be catered to users taking advantage of Google Chrome’s Data Saver features.
Better Error Handling
Previously, error handling might get awry if the property is not initialized for @Output. With Angular 7 though, there is a provision for enhanced error handling in such a scenario.
Drag and Drop
The novel @angular/cdk/drag-drop module offers developers the ability to easily and declaratively create drag-and-drop interfaces. It further supports free dragging, sorting within a list, and transferring items between animations, lists, placeholders, previews, and touch devices.
Moreover, two additional helper methods are also available. moveItemInArray for reordering lists and transferArrayItem for transferring items between lists.
New ng-compiler
The all-new ng-compiler is faster and better than ever. It offers an accelerated eight-phase compilation and an almost double reduction rate of large app size. Furthermore, the new ng-compiler is equipped with the ability of advanced 8-phase rotating ahead-of-time compilation. All of this simply means an unbelievable reduction of 95 to 99% in bundle sizes for most applications.
Router
If you try to trigger a navigation outside the Angular zone in the Angular 7 then a warning will be displayed. In any case, if the new warning fails to show up in the development mode then Angular will log a warning on its own. Furthermore, navigation execution context info is added to activation hooks.
Splitting of @angular/core
Angular is an enormous framework that comes with just so many modules. In most scenarios, many of these modules are never required by developers. As such, Angular 7 comes with a split @angular/core. Each split will be having no more than 418 modules.
Virtual Scrolling
The newly introduced Virtual Scrolling feature in Angular 7 enables loading as well as unloading elements from the DOM based on the visible parts. <cdk-virtual-scroll-viewport> is the scrolling package that offers helpers for directives that react to scroll events.
This allows a performant way for simulating all items that are being rendered. It does so by setting the height of the container element the same as that of the height of the total number of elements to be rendered and thereafter rendering only those items in view. This results in faster experience for users with very large scrollable lists.
Dependency Updates
Here are important dependency updates for the Angular 7.0:
- Upgraded TypeScript to 3.1 – Typically, Angular lags a few releases behind TypeScript. In order to avoid so in Angular 7, the earlier TypeScript version 2.7 is now upgraded to 3.1. Now, it’s mandatory to use the latest version of TypeScript while working with Angular 7.0.
- Addition of RxJs 6.3.3 – The latest version of RxJs, which is 6.3.3 is added to Angular 7. The latest version of RxJs has a number of appreciable additions and changes. In addition to offering a boost in performance, these enhancements allow easier debugging of call stacks and improvement in modularity.
- Support for Node v10 – Along with support for Node 8, Angular 7 provides support for the latest Node 10.
Partner Launches
- Angular Console – A brand new downloadable console allowing for starting as well as running Angular projects on the local machine.
- NativeScript – NativeScript allows a single project that builds for the web as well as mobile.
- Stable Release of AngularFire – In addition to having the first stable release, AngularFire comes with a new home on npm.
- StackBlitz 2.0 – The 2nd release of StackBlitz is here. It includes the Angular Language Service and several new features, including tabbed editing.
Wait! No Project Ivy?
Despite the fact that Angular 7 is better than previous releases, it is a great disappointment that the long-awaited Ivy project wasn’t able to make it. Based on the incremental DOM architecture, Ivy is a brand new render engine.
Developed with a consideration to tree shaking, Ivy allows application bundles to be smaller. They solely include parts of the Angular source that is actually used by an Angular application, and thus a reduction in size becomes possible.
Worry not though, as Ivy is under active development, as stated in the official blog post, and will be out with the follow-up releases to Angular 7. As Google has committed offering two upgrades in a single year, it won’t be much of a surprise if Ivy gets released with the subsequent release to Angular 7.0.
Upgrading to Angular 7.0
As already discussed, migrating from previous Angular versions to the 7.0 is very simple. Only a single command is required to migrate all Angular 6 apps to Angular 7. It is:
$ ng update @angular/cli @angular/core
For those making use of Angular Material, the command to upgrade the same is:
$ ng update @angular/material
See! As easy as a breeze. If you’re experiencing problems while migrating from previous versions of Angular to 7, please go through the official Angular upgrade guide.
Want to advance your Angular skills? Here are some of the best Angular tutorials to get you started!
