Going through the change log and the official post about the release of Angular Version 6.0.0 it says : Angular v6 is the first release of Angular that unifies the Framework, Material and CLI.

Yes! It is. For more check out the Angular change-log here and lets take a look one by one on each of the new features:

Dependencies Updated:

  • @angular/core now depends on
    • Type Script 2.7
    • RxJS 6.0.0
    • tslib 1.9.0
  • @angular/platform-server now depends on Domino 2.0

and few new CLI commands has also introduced:

ng update

This CLI command can be used to check for updates for your packages included in the packages.json file in your project’s root directory.

ng update <package>

This actually analyze you packages.json and uses the library of angular recommend you about the package’s updates in your Angular App. Not exactly but it is as same as npm-check-updates

npm i -g npm-check-updates
ncu -u
npm install

ng update will not replace your package manager, but 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.

For example, the command

ng update @angular/core

will update all of the Angular framework packages as well as RxJS and TypeScript, and will run any schematics available on these packages to keep you up to date. As part of this one command, we’ll automatically install rxjs-compat into your application to make the adoption of RxJS v6 smoother.

ng add

ng add <package>

This is another new Angular CLI command can be used to add a new package to your app.
ng add will use your package manager to download new dependencies and invoke an installation script (implemented as a schematic) which can update your project with configuration changes, add additional dependencies (e.g. auth0-js), or scaffold package-specific initialization code.

You may take a look at Angular Material’s ng-add schematic for an example to help you get started building your own ng-add schematics.

 "ng-add": {
      "description": "Adds Angular Material to the application without affecting any templates",
      "factory": "./shell",
      "schema": "./shell/schema.json",
      "aliases": ["material-shell"]
},

Angular Elements

Angular Elements is focused on allowing you to bootstrap Angular components within an existing Angular application by registering them as Custom Elements.

Angular Material + CDK Components

The biggest addition is the new tree component for displaying hierarchical data. Following patterns from the data-table component, the CDK houses the core tree directives, with Angular Material offering the same experience with Material Design styles on top.

Angular Material Starter Components

Once you have run

ng add @angular/material

to install material to an existing application, you will also be able to generate 3 new starter components.

Material Sidenav
ng generate @angular/material:material-nav --name=your-navcomponent

You can now generate a starter component including a toolbar with the app name and the side navigation. This component is responsive based on breakpoints. Run the above command and you will get your material sidenav ready.

Angular material sidenav

 

Material Dashboard

This will generate a starter dashboard component containing a dynamic grid list of cards.

ng generate @angular/material:material-dashboard --name=your-dashboardcomponent

Angular Dashboard Component

You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.

ng generate @angular/material:material-table --name=my-table

Material Data Table

CLI v6 now has support for workspaces containing multiple projects, such as multiple applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration.

Each CLI workspace has projects, each project has targets, and each target can have configurations. e.g.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Angular6SPA": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Angular6SPA",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Angular6SPA:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Angular6SPA:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Angular6SPA:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "Angular6SPA-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Angular6SPA:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "Angular6SPA"
}


 

Library Support

This is for for creating and building libraries for Angular. Use the below command to create a new library:

ng generate library <Yourlibraryname>

Services are now moved from modules referencing services to services referencing modules. This allows us to only bundle services into your code base in modules where they are injected.

Before:

/** app.module.ts */
@NgModule({
  ...
  providers: [YourService]
})
export class AppModule {}

and

/* your-service.ts */
import { Injectable } from '@angular/core';

@Injectable()
export class YourService {
 
 constructor() { }

}

Now:

/* your-service.ts */
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})

export class YourService {
 
 constructor() { }

}

Animations Performance Improvements

Animations are no longer need Polyfill. This means that you can remove this polyfill from your application and save approximately 47KB of bundle size.

RxJS Version 6

RxJS has been updated to make it more tree-shakable, ensuring that only the pieces of RxJS that you use are included in your production bundles.

If you use ng update, your application should keep working, but you can learn more about the migration here.

Long Term Support(LTS)

Each major release of Angular will be supported for 18 months with around 6 months of active development followed by 12 months of critical bugfixes and security patches as announced in the release post of Angular 6.0.0.

Conclusion

Version 6 proves once again how solid the foundation of Angular is. By merely updating to the latest version, existing applications get noticeable performance improvements. The published 2.7 KB, which currently require a Hello World login based on it, is more than competitive. New options, such as treeshakable providers or white space removal, are in the same vein and show that performance tops the list of architectural goals.

Angular now penetrates into areas previously dominated by smaller frameworks. With Angular Elements, the team is also solving its original promise of relying on Web Components.

To Learn more about the upgrading your Angular App to version 6.0.0 check here.

Source: 
https://blog.angular.io/
https://www.angular.io/

 


SwiftLogic.In

SwiftLogic is Team Of Creatives who is passionate about the New Technology, Services and Facing Challenges. We delivers Software Products in Native,Web Apps and Hybrid application development. iOS Appications, Andriod Applications, UI/UX designs ,Web design,E-commerce Applications.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.