New NG – CLI
The new ng cli is now smarter, the new cli will prompt users while running ng commands. And further the prompts are customizable through schemetic. json by using the Schematic CLI.
The new CLI compiler is capable of rotating 8-phases AOT compilation and most of the applications will reduce its bundle sizes upto 95-99%.
Upgrading to the new cli can be done in 3 simple steps:
⦁ Uninstall old angular cli
npm uninstall -g @angular/cli # Remove global package
npm uninstall –save-dev @angular/cli # Remove from package.json
⦁ Update node package mange if required
npm install -g npm
⦁ Install the new version of cli
npm install -g @angular/cli@latest # Global package
npm install –save-dev @angular/cli@latest # Local package
npm install # Restore removed dependencies
DoBootstrap with new Angular
A new lifecycle hook has been introduces in angular 7 that is called “ngDoBootstrap” and an interface called “doBootstrap”
Added Component Development Kit – Angular Material
Scrolling Module : The module enables to load and unload contents from DOM as per their visibility. So, be ready to take the advantage of the performance boost when the list is huge or images are being loaded.
DragDrop Module: Now there is no need to add third party packages or custom implementation to enable the drag drop or ordering features as the new angular material now supports drag-drop including the reordering list. The CDK includes automatic rendering, drag handler, drop handler, ability to transfer data between lists, etc.
Select Element’s accessibility improved
By using the native select element inside mat-form-field, the accessibility of the application can be improved as the native select has some performance, usability and accessibility advantages. Also, by keeping mat-select directive within the element we can get full-control over the presentation options
Performance and Size
Reviewing the earlier versions of angular, we can notice that the team has put efforts on reducing the bundle/build size and increasing the performance of application. The same goes for the new angular 7 too. The new angular has discovered a new backward-compatible renderer focused on speed improvement, size reduction & more flexibility. Most of the developers include reflect-metadata polyfil in the production which isn’t required at all. As it is only needed during the development process but not with the production build. So, the angular team has now decided to fix this by removing it from polyfil.ts during the production build in version 7. This Ivy rendering will reduce the code size thereby making the compilation and execution faster.
Dependency Updates
With the release of Angular 7 the updates dependencies on major 3rd party projects are as follows:
⦁ TypeScript 3.1
⦁ RxJS 6.3
⦁ Node 10 (Support for node 8 continues
