New features of Angular 5 and Angular 7

What is new in Angular 5?

The Angular 5 is released on 1st November 2017.

 Build optimizer
 It helps to removed unnecessary code from your application. Angular Universal State Transfer API and DOM Support By using this feature, we can now share the state of the application between the server side and client side  very easily. 

Compiler Improvements
    This is one of the very nice features of Angular 5, which improved the support of incremental compilation of  an application.

Preserve Whitespace
In earlier versions of Angular, unnecessary new lines, tabs and white spaces were created during the build. 

Now, in Angular 5, the decision is in your hands whether you need them or not. Angular 5 supports to restrict  them (newlines, tabs, and white spaces) in both, the application level or you can restrict them individual component level where you wish to restrict.

    If you want to restrict them only for TestComponent  then below is the sample code,

        @Component({ 
            templateUrl: 'test.component.html', 
            preserveWhitespaces: false 
        } 
        export class TestComponent {} 

    If you want to restrict them throughout the application level then we have add the below lines of code in tsconfig.json file.

        "angularCompilerOptions": { 
            "preserveWhitespaces": false 
        } 

Increased the standardization across all browsers
In earlier versions of Angular, we were depending on i18n whenever we wanted to support internationalization in our application.  In Angular 5 now no need to depend on i18n, it provides a new date, number, and currency pipes which increases the internationalization across all the browsers and eliminates the need of i18n polyfills.

exportAs 
In Angular 5, multiple names support for both directives and components
 
HttpClient
    Before Angular 4.3 versions, we were using @angular/HTTP module for all kinds of HTTP requests. Now,  in Angular 5, @angular/http module has been deprecated and introduced new module called HttpClientModule which comes under @angular/common/http package.

Improved Decorator Support
    In Angular 5, we can use lambda expressions instead of naming functions. Sample code snippet as below,

    Before,

    Component({ 
        provider: [{ 
            provide: 'my-service', 
            useValue: testMethod() 
        }] 
    }) 
   
    export class CustomClass {} 

    Now in Angular 5,

        Component({ 
        provider: [{ 
            provide: '' 
            my - service ', useFactory: () => null}] 
        }) 
        export class CustomClass {} 

Few new Router Lifecycle Events being added in Angular 5
    In Angular 5 few new life cycle events being added to the router and those are ActivationStart, ActivationEnd,  ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd.

 Angular 5 supports TypeScript 2.3 version.

Improved in faster Compiler support :  
A huge improvement made in an Angular compiler to make the development build faster. We can now take advantage  of by running the below command in our development terminal window to make the build faster.

    ng serve/s --aot


-----------------------------------------------------------------------------------------------------------

Angular 7 feature

1) Angular CLI has updated to v7.0.2 added some features like now it will prompt users while typing common commands  like ng-add or ng-new, @angular/material to help you discover built-in features like routing or SCSS support.

2)Application performance:
Angular team discovered blemish that Angular developer were including the reflect-metadata polyfill in production, which is only needed in development, In order 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, removing this polyfill from production builds by default.

To speed up the performance new applications will warn when the initial bundle is more than 2MB and will error at 5MB which user can modify it in angular.json file.

3)Angular Material & the CDK :
     major update in 2018, refresh as well as
     virtual scrolling,
     for dynamically loading and unloading parts of the DOM to build high-performing,
     large lists of data.
     drag-and-drop capability by importing the DragDropModule or the ScrollingModule.

4)Angular Compatibility Compiler (ngcc)
 
5)Angular Do-Bootstrap
 
6)Better Error Handling
  Angular 7 has an improved error handling for @Output if property is not initialized.

7)Dependency Updates In Angular 7
    TypeScript 3.1 support :
    Angular 7 have updated TypeScript version from 2.7 to 3.1 which is it's the latest release. It's compulsory  to use TypeScript's latest version while working with Angular 7. Usually Angular lags a few releases behind, so they have done that to match latest TypeScript version for once.
  
    RxJS 6.3 :
    The latest version of RxJs(version 6.3.3) is added in Angular 7 with its new exciting additions and changes. 

    These Angular 7 changes provide developers a boost in performance and easier to debug call stacks and  improvement in modularity also making it as backward compatible as possible.
   
    Added Support for Node v10 :
    Team Angular 7 now supports the Node V10 with backward compatibility as well, check out what's new in Node v10.