updating to angular 4

Author: paxtonhare

marklogic-data-hub/src/trace-ui/src/app/traces/trace-viewer.component.ts

@@ -29,11 +29,11 @@ export class TraceViewerComponent implements OnInit, OnDestroy {
   };
 
   private sub: any;
-  private trace: Trace;
+  public trace: Trace;
   private plugins: Array<string>;
 
   private currentPluginType: string;
-  private currentPlugin: Plugin;
+  public currentPlugin: Plugin;
 
   constructor(
     private route: ActivatedRoute,

marklogic-data-hub/src/trace-ui/src/app/traces/trace-viewer.style.scss

@@ -72,7 +72,7 @@ app-trace-viewer {
 }
 
 .plugin-io {
-  flex: 1;
+  flex: auto;
 }
 
 .plugin-nav {
@@ -146,7 +146,7 @@ app-codemirror {
 }
 
 .half-width {
-  max-width: 48%;
+  max-width: 50%;
 }
 
 .summary, .plugins {

quick-start/.angular-cli.json

@@ -1,21 +1,22 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.32.3",
     "name": "data-hub-quickstart"
   },
   "apps": [
     {
       "root": "src/main/ui",
       "outDir": "dist",
       "assets": [
-        "assets"
+        "assets",
+        "favicon.ico"
       ],
       "index": "index.html",
       "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/mdi/css/materialdesignicons.css",
@@ -39,12 +40,13 @@
   },
   "lint": [
     {
-      "files": "src/main/ui/**/*.ts",
-      "project": "src/main/ui/tsconfig.json"
+      "project": "src/main/ui/tsconfig.app.json"
     },
     {
-      "files": "e2e/**/*.ts",
-      "project": "e2e/tsconfig.json"
+      "project": "src/main/ui/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
     }
   ],
   "test": {
@@ -55,5 +57,5 @@
   "defaults": {
     "styleExt": "scss",
     "component": {}
-    }
   }
+}

quick-start/dependency-check.js

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

quick-start/e2e/tsconfig.e2e.json

@@ -29,7 +29,6 @@ module.exports = function (config) {
       fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './.angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage

quick-start/karma.conf.js

@@ -3,7 +3,6 @@
   "version": "2.0.0-alpha.2",
   "license": "APACHE",
   "homepage": "https://github.com/marklogic/marklogic-data-hub",
-  "angular-cli": {},
   "scripts": {
     "rimraf": "rimraf",
     "ng": "ng",
@@ -16,47 +15,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
-    "@angular2-material/core": "^2.0.0-alpha.8-2",
-    "@angular2-mdl-ext/popover": "^0.5.0",
-    "@angular2-mdl-ext/select": "^0.9.2",
-    "angular2-mdl": "^2.13.1",
-    "angular2-moment": "^1.0.0-beta.1",
-    "clipboard": "^1.5.12",
-    "codemirror": "^5.17.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/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "@angular-mdl/core": "^4.0.1",
+    "@angular-mdl/popover": "^0.6.3",
+    "@angular-mdl/select": "^0.10.4",
+    "angular2-moment": "^1.3.3",
+    "clipboard": "^1.6.1",
+    "codemirror": "^5.25.0",
     "core-js": "^2.4.1",
-    "d3-ng2-service": "^1.1.3",
-    "font-awesome": "^4.6.3",
-    "hammerjs": "^2.0.8",
-    "lodash": "^4.14.2",
-    "material-design-icons-iconfont": "^3.0.2",
-    "material-design-lite": "^1.2.0",
-    "mdi": "1.7.22",
-    "ng2-truncate": "^1.2.0",
+    "font-awesome": "^4.7.0",
+    "lodash": "^4.17.4",
+    "material-design-icons-iconfont": "^3.0.3",
+    "material-design-lite": "^1.3.0",
+    "mdi": "1.8.36",
     "rxjs": "^5.1.0",
     "semver": "^5.3.0",
-    "sockjs-client": "^1.1.1",
+    "sockjs-client": "^1.1.2",
     "stompjs": "^2.3.3",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.6"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@types/codemirror": "0.0.32",
-    "@types/hammerjs": "^2.0.32",
-    "@angular/cli": "1.0.0-beta.32.3",
-    "@angular/compiler-cli": "^2.4.0",
+    "@types/codemirror": "0.0.38",
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
     "@types/jasmine": "2.5.38",
-    "@types/lodash": "^4.14.34",
+    "@types/lodash": "^4.14.58",
     "@types/node": "~6.0.60",
-    "@types/semver": "^5.3.30",
-    "codelyzer": "~2.0.0-beta.4",
+    "@types/semver": "^5.3.31",
+    "codelyzer": "~2.0.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
@@ -69,7 +62,7 @@
     "protractor": "~5.1.0",
     "rimraf": "^2.5.4",
     "ts-node": "~2.0.0",
-    "tslint": "~4.4.2",
-    "typescript": "~2.0.0"
+    "tslint": "~4.5.0",
+    "typescript": "~2.2.0"
   }
 }

quick-start/package.json

@@ -1,7 +1,6 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-/*global jasmine */
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
@@ -22,7 +21,7 @@ exports.config = {
   },
   beforeLaunch: function() {
     require('ts-node').register({
-      project: 'e2e'
+      project: 'e2e/tsconfig.e2e.json'
     });
   },
   onPrepare() {

quick-start/protractor.conf.js

@@ -1,17 +1,15 @@
-/* tslint:disable:no-unused-variable */
-
 import { TestBed, async } from '@angular/core/testing';
+
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ],
-    });
-    TestBed.compileComponents();
-  });
+    }).compileComponents();
+  }));
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);