chore: update to angular 4 and angular-cli 1.0.0

angular-cli.json → .angular-cli.json

@@ -1,6 +1,6 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.30",
     "name": "meditation-plus-angular"
   },
   "apps": [
@@ -17,7 +17,8 @@
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
         "../node_modules/normalize.css/normalize.css",
@@ -30,8 +31,8 @@
         "../node_modules/moment-timezone/moment-timezone.js",
         "../node_modules/socket.io-client/dist/socket.io.min.js"
       ],
+      "environmentSource": "environments/environment.ts",
       "environments": {
-        "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
@@ -45,11 +46,15 @@
   "lint": [
     {
       "files": "src/**/*.ts",
-      "project": "src/tsconfig.json"
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "files": "src/**/*.ts",
+      "project": "src/tsconfig.spec.json"
     },
     {
       "files": "e2e/**/*.ts",
-      "project": "e2e/tsconfig.json"
+      "project": "e2e/tsconfig.e2e.json"
     }
   ],
   "test": {
@@ -58,19 +63,10 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "prefixInterfaces": false,
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
+    "styleExt": "scss",
+    "component": {
+      "inlineTemplate": false,
+      "spec": true
     }
   }
 }

e2e/tsconfig.json → e2e/tsconfig.e2e.json

@@ -1,16 +1,19 @@
 {
-  "compileOnSave": false,
   "compilerOptions": {
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc-e2e",
-    "sourceMap": true,
     "target": "es5",
-    "typeRoots": [
-      "../node_modules/@types"
+    "types":[
+      "jasmine",
+      "node"
     ]
   }
 }

karma.conf.js

@@ -8,9 +8,13 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-remap-istanbul'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
     files: [
       { pattern: './src/test.ts', watched: false }
     ],
@@ -20,19 +24,16 @@ module.exports = function (config) {
     mime: {
       'text/x-typescript': ['ts','tsx']
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'karma-remap-istanbul']
-              : ['progress'],
+          ? ['progress', 'coverage-istanbul']
+          : ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -8,9 +8,10 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "build": "ng build",
     "test": "ng test",
-    "pree2e": "webdriver-manager update --standalone false --gecko false",
-    "e2e": "protractor",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
     "sw": "sw-precache --root=dist --config=sw-precache-config.js"
   },
   "repository": {
@@ -22,18 +23,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.3.1",
-    "@angular/compiler": "^2.3.1",
-    "@angular/core": "^2.3.1",
-    "@angular/forms": "^2.3.1",
-    "@angular/http": "^2.3.1",
-    "@angular/material": "^2.0.0-beta.2",
-    "@angular/platform-browser": "^2.3.1",
-    "@angular/platform-browser-dynamic": "^2.3.1",
-    "@angular/router": "^3.3.1",
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-b4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "angular2-jwt": "^0.1.28",
-    "angular2-linky": "^1.2.2",
-    "angular2-moment": "^1.1.0",
+    "angular2-linky": "^1.2.3",
+    "angular2-moment": "^1.3.3",
     "chart.js": "^2.3.0",
     "chroma-js": "^1.2.2",
     "core-js": "^2.4.1",
@@ -43,39 +45,39 @@
     "moment-timezone": "^0.5.11",
     "ng2-charts": "^1.5.0",
     "normalize.css": "^5.0.0",
-    "rxjs": "^5.0.1",
+    "rxjs": "^5.1.0",
     "scriptjs": "^2.5.8",
-    "socket.io-client": "^1.7.2",
+    "socket.io-client": "^1.7.3",
     "stable-interval": "^0.0.4",
-    "timezones.json": "^1.1.0",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.2"
+    "timezones.json": "^1.2.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-beta.30",
-    "@angular/compiler-cli": "^2.3.1",
+    "@angular/cli": "^1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
     "@types/chart.js": "^0.0.12",
     "@types/chroma-js": "^1.1.32",
     "@types/emojione": "^2.2.0",
     "@types/jasmine": "2.5.38",
     "@types/jstimezonedetect": "^1.0.0",
     "@types/moment": "^2.13.0",
     "@types/moment-timezone": "^0.2.34",
-    "@types/node": "^7.0.5",
+    "@types/node": "~6.0.60",
     "@types/scriptjs": "^0.0.2",
     "@types/socket.io-client": "^1.4.29",
-    "codelyzer": "~2.0.0-beta.1",
-    "jasmine-core": "2.5.2",
-    "jasmine-spec-reporter": "2.5.0",
-    "karma": "1.2.0",
+    "codelyzer": "~2.0.0",
+    "jasmine-core": "~2.5.2",
+    "jasmine-spec-reporter": "~3.2.0",
+    "karma": "~1.4.1",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-remap-istanbul": "^0.2.1",
-    "protractor": "~4.0.13",
-    "sw-precache": "^4.3.0",
-    "ts-node": "1.2.1",
-    "tslint": "^4.3.0",
-    "typescript": "~2.0.3"
+    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.0",
+    "sw-precache": "^5.1.0",
+    "ts-node": "~2.0.0",
+    "tslint": "^4.5.0",
+    "typescript": "~2.1.0"
   }
 }

protractor.conf.js

@@ -2,7 +2,7 @@
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
 /*global jasmine */
-var SpecReporter = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
@@ -20,13 +20,12 @@ exports.config = {
     defaultTimeoutInterval: 30000,
     print: function() {}
   },
-  useAllAngular2AppRoots: true,
   beforeLaunch: function() {
     require('ts-node').register({
       project: 'e2e'
     });
   },
   onPrepare: function() {
-    jasmine.getEnv().addReporter(new SpecReporter());
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
 };

src/app/admin/appointment/appointment-form.component.ts

@@ -8,7 +8,7 @@ import { AppointmentService } from '../../appointment';
 })
 export class AppointmentFormComponent {
 
-  appointment: Object;
+  appointment;
   loading = false;
 
   constructor(

src/app/admin/broadcast/broadcast-form.component.ts

@@ -8,7 +8,7 @@ import { BroadcastService } from './broadcast.service';
 })
 export class BroadcastFormComponent {
 
-  broadcast: Object;
+  broadcast;
   loading: boolean;
 
   constructor(

src/app/admin/commitment/commitment-form.component.ts

@@ -11,7 +11,7 @@ import { CommitmentService } from '../../commitment';
 })
 export class CommitmentFormComponent {
 
-  commitment: Object;
+  commitment;
   loading = false;
 
   constructor(

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { RouterModule, PreloadAllModules } from '@angular/router';
 import { MaterialModule } from '@angular/material';
 import 'hammerjs';
 import { MomentModule } from 'angular2-moment';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 /*
  * Platform and Environment providers/directives/pipes
  */
@@ -69,7 +70,8 @@ const APP_PROVIDERS = [
     TestimonialModule,
     MessageModule,
     MeditationModule,
-    QuestionModule
+    QuestionModule,
+    BrowserAnimationsModule
   ],
   providers: [ // expose our Services and Providers into Angular's dependency injection
     ENV_PROVIDERS,

src/app/appointment/appointment.component.ts

@@ -8,7 +8,7 @@ import { UserService } from '../user/user.service';
 import * as moment from 'moment-timezone';
 import * as $script from 'scriptjs';
 // tslint:disable-next-line
-const timezones = require('timezones.json');
+import * as timezones from 'timezones.json';
 
 // HACK: for Google APIs
 declare var gapi: any;

src/app/meditation/meditation.component.ts

@@ -9,7 +9,7 @@ import * as moment from 'moment';
 import { AppState } from '../app.service';
 
 // tslint:disable-next-line
-const StableInterval = require('stable-interval');
+import * as StableInterval from 'stable-interval';
 
 /**
  * Component for the meditation tab inside home.

src/app/question/suggestions/suggestions.component.ts

@@ -12,7 +12,7 @@ import { QuestionService } from '../question.service';
 export class QuestionSuggestionsComponent implements OnChanges {
   @Input() currentSearch: string;
 
-  suggestions: Object[];
+  suggestions;
   activated = true;
   loading = false;