Angular 6 setup

NOTE: good article on new Angular 6 features here, recommended reading!

Angular 6 has some major differences w.r.t. Angular 5, especially regarding:

• RxJS
• Angular CLI configuration

Angular 6 and RxJS 6+

Angular 6 uses RxJS 6+ and the new pipeable operators (see this article and this one for more info about pipeable operators and their advantages). The new RxJS API is not backward compatible, so if you come from an Angular <=5.x project you must fix the usage (e.g. imports, dot-chaining methods on observables...). Actually, with the new Schematics (see article on top of this section) the migration is fairly easy (more on this later). The only important bit to remember is, if you use some third party libraries which are not RxJS 6 compatible, you can add the rxjs-compat dependency to your project, a transitional package with the old RxJS API (but of course you won't benefit from the new API improvements).

Angular CLI 6

In the previous Angular CLI versions, a file named .angular-cli.json was used to configure the CLI behaviour, but lots of config options were only available via command line flags, usually passed on npm scripts in package.json. Angular CLI 6+ instead uses a new file for configuration, namely angular.json, which tries to centralize the configuration options for the CLI. In fact, here the user can specify the values for almost all the options for the build/serve phases; moreover it is possible to create custom configurations for build/serve/test phases which overrides the default values.

It is advisable to use this new configuration file instead of the old command line flags in npm scripts:

• CLI configuration is centralized in one place, so it is easier to locate/change CLI related settings.
• scripts in package.json are much shorter.
• not all settings are available via command line flags.

You can find an example of this configuration file at the end of this section.

More info on new angular.json can be found here.

Update an Angular <=5.x project to version 6

You can use this handy tool as a checklist of todos to migrate your project. The essential parts are:

• Update Angular imports to match the new ones (e.g. HttpClientModuleinstead of HttpClient).
• Update Angular CLI to latest version.
• Run ng update @angular/core to update Angular core to v. 6.
• If you use Angular Material, run ng update @angular/material.

• Update RxJS usage, this can be partially automated using: npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json

• If all third party libs are RxJS 6 compliant, remove rxjs-compat.

• Update new CLI configuration file, angular.json: put all environment-dependent configuration there (e.g. dev, staging, prod), for build, serve and test targets as needed.
• Update package.json, scriptssection, to invoke ng serve and ng build commands using the --configuration flag to specify the specific configuration on angular.json.

Minimal example of angular.json/package.json in Angular 6 project

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "proj-name": {
      "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",
            "showCircularDependencies": false,
            "polyfills": "src/polyfills.ts",
            "assets": ["src/assets", "src/favicon.ico"],
            "styles": ["src/styles.scss"],
            "scripts": [],
            "aot": true,
            "verbose": true,
            "statsJson": true
          },
          "configurations": {
            "staging": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ]
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "proj-name:build"
          },
          "configurations": {
            "staging": {
              "browserTarget": "proj-name:build:staging"
            },
            "production": {
              "browserTarget": "proj-name:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "proj-name:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": ["src/styles.scss"],
            "assets": ["src/assets", "src/favicon.ico"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "ibm-angular-mlrp-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "proj-name:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["e2e/tsconfig.e2e.json"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "proj-name",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "project-prefix",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "project-prefix"
    }
  }
}

package.json:

{
  "name": "ibm-angular-mlrp",
  "version": "0.0.0",
  "license": "MIT",
  "engines": {
    "node": "8.9.1",
    "npm": "6.0.0"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4001 --host 0.0.0.0 --ssl --configuration=development",
    "build:development": "ng build",
    "build:staging": "ng build --configuration=staging",
    "build:production": "ng build --configuration=production",
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}