Angular 6 with its new features

1. TypeScript 2.7+ support
2. Upgrading to RxJS 6.0.0
   Angular 6 uses the latest version of Rxjs library.

To update to RxJS 6, you simply run -
 npm install — save rxjs@6 
Simply run the below command and update your existing Angular project-
npm install — save rxjs-compat

RxJS 6 Related import paths -

Instead of -
import { Observable } from ‘rxjs/Observable’;
import { Subject } from ‘rxjs/Subject’;
Use a single import -
import { Observable, Subject } from ‘rxjs’;

3. The template tag is deprecated

Now in Angular 6, you should use <ng-template> instead of <template>

<!-- Works only upto Angular 5 -->
<template [ngIf]="isSubmit">
<p>This template only if submit is true.</p>
</template>
<!-- Now in Angular 6, you should use <ng-template> instead of <template> -->
<ng-template [ngIf]="isSubmit">
<p>This ng-template only if submit is true.</p>
</ng-template>

4. Bazel Compiler

From Angular 6 release, will start having the Bazel compiler support and when you compile the code with Bazel Compiler, you will recompile entire code base, but it compiles only with necessary code.

5. Angular 6 Renamed Operators -

The lists of renamed operators are –

1. do() => tap()
2. catch() => catchError()
3. finally() => finalize()
4. switch() => switchAll()
5. throw() => throwError()
6. fromPromise() => from()

6. angular-cli.json was replaced by an angular.json file

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist/my-dir",
      "assets": [
        "assets",
        "favicon.png"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../src/assets/actor/css/styles.css",
         "./styles.css"
       ],
      "scripts": [
        
         ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "local": "environments/environment.ts",
        "dev": "environments/environment.dev.ts",
        "prod": "environments/environment.prod.ts",
        "stag": "environments/environment.stag.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

angular.json file in angular 6

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "cli": {
    "packageManager": "yarn",
    "warnings": {
      "typescriptMismatch": false
    }
  },
  "newProjectRoot": "projects",
  "projects": {
    "site": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "aot": true,
            "optimization": true,
            "buildOptimizer": true,
            "outputHashing": "all",
            "sourceMap": true,
            "statsJson": true,
            "extractCss": true,
            "extractLicenses": true,
            "namedChunks": true,
            "vendorChunk": false,
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/generated",
              "src/app/search/search-worker.js",
              "src/pwa-manifest.json",
              "src/google385281288605d160.html",
              {
                "glob": "custom-elements.min.js",
                "input": "node_modules/@webcomponents/custom-elements",
                "output": "/assets/js"
              },
              {
                "glob": "native-shim.js",
                "input": "node_modules/@webcomponents/custom-elements/src",
                "output": "/assets/js"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "fast": {
              "optimization": false
            },
            "next": {
              "fileReplacements": [
                {
                  "src": "src/environments/environment.ts",
                  "replaceWith": "src/environments/environment.next.ts"
                }
              ],
              "serviceWorker": true
            },
            "stable": {
              "fileReplacements": [
                {
                  "src": "src/environments/environment.ts",
                  "replaceWith": "src/environments/environment.stable.ts"
                }
              ],
              "serviceWorker": true
            },
            "archive": {
              "fileReplacements": [
                {
                  "src": "src/environments/environment.ts",
                  "replaceWith": "src/environments/environment.archive.ts"
                }
              ],
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "site:build"
          },
          "configurations": {
            "fast": {
              "browserTarget": "site:build:fast"
            },
            "next": {
              "browserTarget": "site:build:next"
            },
            "stable": {
              "browserTarget": "site:build:stable"
            },
            "archive": {
              "browserTarget": "site:build:archive"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "site:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "src/karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/generated",
              "src/app/search/search-worker.js",
              "src/pwa-manifest.json",
              "src/google385281288605d160.html",
              {
                "glob": "custom-elements.min.js",
                "input": "node_modules/@webcomponents/custom-elements",
                "output": "/assets/js"
              },
              {
                "glob": "native-shim.js",
                "input": "node_modules/@webcomponents/custom-elements/src",
                "output": "/assets/js"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "site-e2e": {
      "root": "",
      "projectType": "application",
      "cli": {},
      "schematics": {},
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "tests/e2e/protractor.conf.js",
            "devServerTarget": "site:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tests/e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "inlineStyle": true,
      "prefix": "aio",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "aio"
    }
  }
}

Reference:- Source of Angular JSON file

7. Some new angular -cli commands are introduced:-

1. ng-add:- Adds support for an external library to your project.

ng add <collection> [options]

2. ng update:- Updates your application and its dependencies. See https://update.angular.io/

ng update [options]

References: ng-add and ng-update

You can upgrade the Angular version by visiting Angular Update Steps