Header Ads

  • Angular 6 released - What is new in Angular 6 ?

    Angular 6 is officially released. It is released with Angular CLI 6 and Material 6.

    Version 6 continues an emphasis on being smaller, faster and easier to use. 

    • Keep in mind that Angular v6 focuses more on the toolchain (and how to make it easier to move quickly with Angular) and less on the underlying framework.
    • Furthermore,the team is synchronizing the major versions going forward for the framework packages (@angular/core@angular/common@angular/compiler, etc), the Angular CLI, and Angular Material + CDK. 
    These are few changes included in Angular 6

    • Typescript 2.7.x supports
    • Improved decorator error messages
    • Fix platform-detection example for Universal
    • Added to supports of Native-Element
    • Added Optional generic type for ElementRef
    • Updates on NgModelChange
    • Add type and hooks to directive def
    • Add canonical view query 
    • Enable size tracking of a minimal CLI render3 application

    Angular 6 New Version Features 

    1.  ng update command added -

     for updating dependencies and code. 

     this new CLI command checks your package.jsonand uses its knowledge of Angular to recommend updates to your application. In short, it will “help you adopt the right version of dependencies, and keep your dependencies in sync.
    Just to clarify something: it will not replace your package manager; ng update uses npm or yarn under the hood to manage dependencies. In addition to updating dependencies and peer dependencies, ng update will apply needed transforms to your project.

    2. ng add command - 
    • This new CLI command promises to make adding new capabilities to your project easy.
    •  ng add, helps developers more quickly add application features - 
      • such as starting out with a Material Design application rather than with a blank application. Material Design is Google’s language for designing applications. '
      • The ng add command also supports turning applications into progressive web apps, which support offline web pages
    3.  Angular - 6 uses  - Version 4 of the Webpack module bundler for JavaScript, generating smaller modules through a technique known as scope hosting. 

    4.  A new method of connecting modules and services, in which services can be “tree-shakable,” meaning they can be left out of an application if not used.

    5. Support for the RxJS 6 library for JavaScript, reducing bundle sizes for common use cases.

     RxJS v6 brings a few major changes, along with a backwards compatibility package rxjs-compat that will keep your applications working. It’s more tree-shakable now, ensuring that only the pieces of RxJS that you use are included in your production bundles.
    Note: If you use ng update, your application should keep working, but you can learn more about the 5.5 to 6.0 migration.

    6.  CLI support for libraries, with developers able to choose ng-packge for transpiling libraries to an Angular format or use the Bazel tool to build libraries. Previously, developers had to build and package libraries by hand if they wanted to share components and services with other teams.

    CLI Workspaces

    CLI v6 now offers support for workspaces containing multiple projects, such as multiple applications or libraries. CLI projects will now use angular.jsoninstead of .angular-cli.json for build and project configuration.
    Each CLI workspace has projects, each project has targets, and each target can have configurations.

    7. The Tree component in Angular Material and the Component Dev Kit to help visual tree structures such as a list of files.
    8. Angular Elements
    Angular is a perfect choice for developing Single-Page Applications, creating a widget that can be added to any existing web page was not a simple task. The Angular Elements package will allow you to create an Angular component and publish it as a Web Component, which can be used in any HTML page.
    Say there is an existing non-SPA app built using JavaScript and jQuery. The developers of this app will be able to use Web Components built in Angular in the pages of such an app. This killer feature will help the enterprise to switch to the Angular framework for web application development.

    9. Ivy Renderer
    Ivy is a new backward-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility by making the size of the app smaller and the compilation faster.The Angular Team promises that switching to Ivy rendered will be smooth. This important feature will reduce the code size by gzipped the code which will make compilation faster. Ivy isn't landing in Angular 6, though the experimental flag will be there and it's more likely to land around  v7 timeframe.

    10. Closure Compiler
    Closure Compiler is the bundling optimizer used to create JavaScript modules for almost all Google web applications. The Closure Compiler consistently generates smaller bundles and does a better job in dead code elimination compared to Webpack and Rollup bundlers. In the upcoming releases of the Angular framework, you’ll be able to use this toolchain for building your apps as well.

    11. Bazel Compiler
    Bazel only rebuilds what is necessary, it is used almost for all software built at Google, including their 500+ apps developed in Angular. Since source code changes often, it doesn’t make sense to rebuild the entire application for every little change. Instead, we should only rebuild code that actually changed, and code that depends on the changes, With advanced local and distributed caching, optimized dependency analysis and parallel execution, you get fast and incremental builds. So we can assume that this would be the important feature of the incremental build.

    12. Component Dev Kit (CDK)
    The Angular Material library uses component dev kit, which provides more than 30+ UI components. CDK allow us to build our own library of UI components using Angular Material. It also supports Responsive Web Design layouts eliminating the need for using libraries like Flex Layout or learning CSS Grid. CDK was released in December of 2017, but the Angular Team keeps improving it.

    13. Service Worker
    It is a script that runs in the web browser and manages to cache for an application. Service worker is included in angular 5. In angular 6 service worker comes with bug fixes and additional feature.

    14. Router
    Added navigationSource and restoredState to NavigationStart , NavigationStart there is no way to know if navigation was triggered imperatively or via the location change. These two use cases should be handled differently for a variety of use cases (e.g., scroll position restoration). This PR adds a navigation source field and restored navigation id (passed to navigations triggered by a URL change).


    • animations: When animation is triggered within a disabled zone, the associated event (which an instance of AnimationEvent) will no longer report the totalTime as 0 (it will emit the actual time of the animation). To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.
    • forms: ngModelChange is now emitted after the value/validity is updated on its control.
    Previously, ngModelChange was emitted before its underlying control was updated. This was fine if you passed through the value directly through the $event keyword, e.g.

    <input [(ngModel)]="name" (ngModelChange)="onChange($event)">
    onChange(value) {

       console.log(value);               // would log updated value

    However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:
    <input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
    onChange(ngModel: NgModel) {

      console.log(ngModel.value);        // would log old value, not updated value

    Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.
    onChange(ngModel: NgModel) {

       console.log(ngModel.value);       // will log updated the value

    The Angular team has started providing the regular updates from the version 2 and these are few details about the angular releases in previous years.
    Angular Versions

    Team Angular is working really hard for the newer version of angular and it would be a major update. Angular 6 RC phase has begun. Angular 6 stable version should be released pretty soon.

    -- Angular JS lateset version - Angular 6 tutorials , angular 6 changes , angular 6 ivy, angular 6 what's new

    1 comment:

    1. Good Knowledge about angular js latest version. Angular 6.0 is really cool and optimized


    Post Top Ad


    Post Bottom Ad