17. What's New in Angular 7?

 Angular 7 being smaller, faster and easier to use and it will making developers life easier. Now Angular 7 is released! This is a major release and expanding to the entire platform including -

1. Core framework
2. Angular Material
3. CLI

Let’s introduce added and modified new features of Angular 7 -

1. Added a new interface - UrlSegment[] to CanLoad interface
2. Added a new interface - DoBootstrap interface
3. Angular 7 added a new compiler - Compatibility Compiler (ngcc)
4. Introduce a new Pipe called - KeyValuePipe
5. Angular 7 now supporting to TypeScript 2.9 and Added Virtual Scrolling and Drag & Drop
6. Added a new elements features - enable Shadow DOM v1 and slots
7. Added a new router features - warn if navigation triggered outside Angular zone
8. Added a new mappings for ngfactory and ngsummary files to their module names in AOT summary resolver.
9. Added a new "original" placeholder value on extracted XMB
10.Added a new ability to recover from malformed URLs
11.Added a new compiler support dot (.) in import statements and also avoid a crash in ngc-wrapped
12.Update compiler to flatten nested template fns

Angular 7 added a new compiler that is called Angular Compatibility Compiler (ngcc).

The ngcc Angular node_module compatibility compiler - The ngcc is a tool which "upgrades" node_module compiled with non-ivy ngc into ivy compliant format.

This compiler will convert node_modules compiled with Angular Compatibility Compiler (ngcc), into node_modules which appear to have been compiled with TSC compiler transformer (ngtsc) and this compiler conversions will allow such “legacy” packages to be used by the Ivy rendering engine.

TSC transformer which removes and converts @Pipe, @Component, @Directive and @NgModule to the corresponding definePipe, defineComponent, defineDirective and defineInjector.


UrlSegment Interface -

UrlSegment interface represents a single URL segment and the constructor, properties, and methods look like below UrlSegment class i.e.

classUrlSegment {
constructor(path: string, parameters: {...})
 path: string
 parameters: {...}
 toString(): string
}