Upgrade angular 7 packages and example app (#65)

- update all package dependencies
- update versions of internal packages
- update example-app to resemble angular-cli 7 app
- get app and tests working

Author: James Salas

.circleci/config.yml

@@ -56,6 +56,7 @@ jobs:
     steps:
       - restore_cache: *repo_cache
       - restore_cache: *deps_cache
+      - run: yarn install
       - run: yarn test:ci
       - store_test_results:
           path: ./coverage

.gitignore

@@ -5,3 +5,4 @@ lerna-debug.log
 yarn-debug.log
 yarn-error.log
 .vscode
+.node-version

jest.config.js

@@ -5,7 +5,9 @@ process.env.JEST_JUNIT_OUTPUT = './coverage/junit.xml';
 
 module.exports = {
   globals: {
-    __TRANSFORM_HTML__: true,
+    'ts-jest': {
+      stringifyContentPathRegex: '\\.html$',
+    },
   },
   transform: {
     '^.+\\.(ts|js|html)$':

package.json

@@ -33,41 +33,45 @@
       "git add"
     ]
   },
+  "engines": {
+    "node": ">=8"
+  },
   "devDependencies": {
-    "@angular/animations": "6.0.7",
-    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.7",
-    "@angular/compiler-cli": "6.0.7",
-    "@angular/core": "6.0.7",
-    "@angular/forms": "6.0.7",
-    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.7",
+    "@angular/animations": "7.2.0",
+    "@angular/cli": "7.2.1",
+    "@angular/common": "7.2.0",
+    "@angular/compiler": "7.2.0",
+    "@angular/compiler-cli": "7.2.0",
+    "@angular/core": "7.2.0",
+    "@angular/forms": "7.2.0",
+    "@angular/platform-browser": "7.2.0",
+    "@angular/platform-browser-dynamic": "7.2.0",
+    "@angular/router": "7.2.0",
     "@commitlint/cli": "7.0.0",
     "@commitlint/config-conventional": "7.0.1",
     "@commitlint/prompt-cli": "7.0.0",
     "@types/jest": "23.1.6",
     "babel-core": "6.26.3",
     "babel-jest": "23.4.2",
-    "codelyzer": "4.4.2",
+    "codelyzer": "4.5.0",
     "husky": "1.1.3",
     "jest": "23.4.1",
     "jest-junit": "5.1.0",
     "jest-preset-angular": "6.0.0",
     "jest-zone-patch": "0.0.8",
     "lerna": "3.4.3",
     "lint-staged": "7.2.0",
-    "ng-packagr": "3.0.6",
+    "ng-packagr": "4.5.0",
     "npm-run-all": "4.1.3",
     "prettier": "1.13.7",
     "redux": "4.0.0",
     "redux-logger": "2.10.2",
     "rimraf": "2.6.2",
-    "rxjs": "6.2.1",
-    "tsickle": "0.32.1",
+    "rxjs": "6.3.3",
+    "tsickle": "0.34.0",
     "tslib": "1.9.3",
     "tslint": "5.11.0",
-    "typescript": "2.7.2",
+    "typescript": "3.2.2",
     "zone.js": "0.8.26"
   }
 }

packages/example-app/angular.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "example-app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "zoo",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/example-app",
+            "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,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "example-app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "example-app:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "example-app: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": ["src/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/**"]
+          }
+        }
+      }
+    },
+    "example-app-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "prefix": "",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "example-app:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "example-app:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "example-app"
+}

packages/example-app/e2e/tsconfig.e2e.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": ["jasmine", "jasminewd2", "node"]
+  }
+}

packages/example-app/package.json

@@ -6,39 +6,57 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build"
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
   },
   "engines": {
-    "node": ">=6.9.5"
+    "node": ">=8"
   },
   "dependencies": {
     "@angular-redux/form": "latest",
     "@angular-redux/router": "latest",
     "@angular-redux/store": "latest",
-    "@angular/common": "^4.1.0",
-    "@angular/compiler": "^4.1.0",
-    "@angular/core": "^4.1.0",
-    "@angular/forms": "^4.1.0",
-    "@angular/http": "^4.1.0",
-    "@angular/platform-browser": "^4.1.0",
-    "@angular/platform-browser-dynamic": "^4.1.0",
-    "@angular/router": "^4.1.0",
-    "core-js": "^2.4.1",
-    "flux-standard-action": "^1.2.0",
+    "@angular/common": "^7.2.0",
+    "@angular/compiler": "^7.2.0",
+    "@angular/core": "^7.2.0",
+    "@angular/forms": "^7.2.0",
+    "@angular/http": "^7.2.0",
+    "@angular/platform-browser": "^7.2.0",
+    "@angular/platform-browser-dynamic": "^7.2.0",
+    "@angular/router": "^7.2.0",
+    "core-js": "^2.6.2",
+    "flux-standard-action": "^2.0.3",
     "ramda": "^0.23.0",
-    "redux": "^3.6.0",
+    "redux": "^4.0.1",
     "redux-logger": "^3.0.1",
-    "redux-observable": "^0.14.1",
-    "rxjs": "^5.3.0",
-    "zone.js": "^0.8.9"
+    "redux-observable": "^1.0.0",
+    "rxjs": "^6.3.3",
+    "tslib": "^1.9.3",
+    "zone.js": "^0.8.27"
   },
   "devDependencies": {
-    "@angular/cli": "1.7.3",
-    "@angular/compiler-cli": "^4.1.0",
-    "@types/node": "~6.0.71",
-    "@types/redux-logger": "^3.0.0",
-    "protractor": "~5.1.1",
-    "ts-node": "~3.0.2",
-    "typescript": "^2.4.1"
+    "@angular-devkit/build-angular": "0.12.1",
+    "@angular/cli": "^7.2.1",
+    "@angular/compiler-cli": "^7.2.0",
+    "@angular/language-service": "7.2.0",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "10.12.18",
+    "@types/ramda": "0.24.18",
+    "@types/redux-logger": "3.0.6",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~3.1.1",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.11.0",
+    "typescript": "3.2.2"
   }
 }

packages/example-app/src/app/animals/animal-list/component.spec.ts

@@ -7,11 +7,11 @@ import { AnimalListComponent } from './component';
 
 @Component({ selector: 'zoo-animal', template: '' })
 class MockAnimalComponent {
-  @Input() key: string;
-  @Input() animalType: AnimalType;
+  @Input() key!: string;
+  @Input() animalType!: AnimalType;
 }
 
-xdescribe('AnimalListComponent', () => {
+describe('AnimalListComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [AnimalListComponent, MockAnimalComponent],
@@ -21,7 +21,7 @@ xdescribe('AnimalListComponent', () => {
 
   it("should have as title 'Welcome to the Zoo'", async(() => {
     const fixture = TestBed.createComponent(AnimalListComponent);
-    const animalList = fixture.debugElement.componentInstance;
+    const animalList = fixture.componentInstance;
 
     animalList.animalsName = 'Wallabies';
     animalList.animalType = 'WALLABIES';

packages/example-app/src/app/animals/animal-list/component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { Animal } from '../model';
 
 @Component({
@@ -9,16 +9,16 @@ import { Animal } from '../model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnimalListComponent {
-  @Input() animalsName: string;
-  @Input() animalType: string;
-  @Input() animals: Observable<Animal[]>;
-  @Input() loading: Observable<boolean>;
-  @Input() error: Observable<any>;
+  @Input() animalsName!: string;
+  @Input() animalType!: string;
+  @Input() animals!: Observable<Animal[]>;
+  @Input() loading!: Observable<boolean>;
+  @Input() error!: Observable<any>;
 
   // Since we're observing an array of items, we need to set up a 'trackBy'
   // parameter so Angular doesn't tear down and rebuild the list's DOM every
   // time there's an update.
-  getKey(_, animal: Animal) {
+  getKey(_: any, animal: Animal) {
     return animal.id;
   }
 }

packages/example-app/src/app/animals/animal/actions.ts

@@ -0,0 +1,2 @@
+export const ADD_TICKET = 'ADD_TICKET';
+export const REMOVE_TICKET = 'REMOVE_TICKET';

packages/example-app/src/app/animals/animal/component.html

@@ -1,10 +1,10 @@
-<div>{{ name$ | async }}</div>
-<div>{{ ticketPrice$ | async }}</div>
+<div>{{ name | async }}</div>
+<div>{{ ticketPrice | async }}</div>
 <div>
   <zoo-counter
-    [count]="numTickets$ | async"
+    [count]="numTickets | async"
     (increment)=addTicket()
     (decrement)=removeTicket()>
   </zoo-counter>
 </div>
-<div>${{ subTotal$ | async }}
+<div>${{ subTotal | async }}