Migrate to Angular 4

dashboard/.angular-cli.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "dashboard"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css",
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.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": {}
+  }
+}

dashboard/.editorconfig

@@ -1,4 +1,4 @@
-# http://editorconfig.org
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]
@@ -8,12 +8,6 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-
 [*.md]
-max_line_length = 0
+max_line_length = off
 trim_trailing_whitespace = false
-
-# Indentation override
-#[lib/**.js]
-#[{package.json,.travis.yml}]
-#[**/**.js]

dashboard/.gitignore

@@ -1,3 +1,43 @@
-src/app/**/*.js.map
+# See http://help.github.com/ignore-files/ for more about ignoring files.
-src/app/**/*.js
+
-node_modules/
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

dashboard/bs-config.json

@@ -1,9 +0,0 @@
-{
-  "server": {
-    "baseDir": "src",
-    "routes": {
-      "/node_modules": "node_modules"
-    }
-  },
-  "port": 3030
-}

dashboard/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('dashboard App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

dashboard/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

dashboard/e2e/tsconfig.e2e.json

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

dashboard/karma.conf.js

@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      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
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

dashboard/package.json

@@ -1,65 +1,50 @@
 {
-  "name": "angular-quickstart",
+  "name": "dashboard",
-  "version": "1.0.0",
+  "version": "0.0.0",
-  "description": "QuickStart package.json from the documentation, supplemented with testing support",
-  "scripts": {
-    "build": "tsc -p src/",
-    "build:watch": "tsc -p src/ -w",
-    "build:e2e": "tsc -p e2e/",
-    "serve": "lite-server -c=bs-config.json",
-    "serve:e2e": "lite-server -c=bs-config.e2e.json",
-    "prestart": "npm run build",
-    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
-    "pree2e": "npm run build:e2e",
-    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
-    "preprotractor": "webdriver-manager update",
-    "protractor": "protractor protractor.config.js",
-    "pretest": "npm run build",
-    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
-    "pretest:once": "npm run build",
-    "test:once": "karma start karma.conf.js --single-run",
-    "lint": "tslint ./src/**/*.ts -t verbose"
-  },
-  "keywords": [],
-  "author": "",
   "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
   "dependencies": {
-    "@angular/common": "~4.0.0",
+    "@angular/animations": "^4.2.4",
-    "@angular/compiler": "~4.0.0",
+    "@angular/common": "^4.2.4",
-    "@angular/core": "~4.0.0",
+    "@angular/compiler": "^4.2.4",
-    "@angular/forms": "~4.0.0",
+    "@angular/core": "^4.2.4",
-    "@angular/http": "~4.0.0",
+    "@angular/forms": "^4.2.4",
-    "@angular/platform-browser": "~4.0.0",
+    "@angular/http": "^4.2.4",
-    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/platform-browser": "^4.2.4",
-    "@angular/router": "~4.0.0",
+    "@angular/platform-browser-dynamic": "^4.2.4",
-
+    "@angular/router": "^4.2.4",
-    "angular-in-memory-web-api": "~0.3.0",
-    "systemjs": "0.19.40",
     "core-js": "^2.4.1",
-    "rxjs": "5.0.1",
+    "rxjs": "^5.4.2",
-    "zone.js": "^0.8.4",
+    "zone.js": "^0.8.14",
-    "bootstrap": "3.3.7",
+    "bootstrap": "3.3.7"
-    "jquery": "1.9.1 - 2"
   },
   "devDependencies": {
-    "concurrently": "^3.2.0",
+    "@angular/cli": "1.3.2",
-    "lite-server": "^2.2.2",
+    "@angular/compiler-cli": "^4.2.4",
-    "typescript": "~2.1.0",
+    "@angular/language-service": "^4.2.4",
-
+    "@types/jasmine": "~2.5.53",
-    "canonical-path": "0.0.2",
+    "@types/jasminewd2": "~2.0.2",
-    "tslint": "^3.15.1",
+    "@types/node": "~6.0.60",
-    "lodash": "^4.16.4",
+    "codelyzer": "~3.1.1",
-    "jasmine-core": "~2.4.1",
+    "jasmine-core": "~2.6.2",
-    "karma": "^1.3.0",
+    "jasmine-spec-reporter": "~4.1.0",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma": "~1.7.0",
-    "karma-cli": "^1.0.1",
+    "karma-chrome-launcher": "~2.1.1",
-    "karma-jasmine": "^1.0.2",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~4.0.14",
+    "protractor": "~5.1.2",
-    "rimraf": "^2.5.4",
+    "ts-node": "~3.2.0",
-
+    "tslint": "~5.3.2",
-    "@types/node": "^6.0.46",
+    "typescript": "~2.3.3"
-    "@types/jasmine": "2.5.36"
+  }
-  },
-  "repository": {}
 }

dashboard/protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

dashboard/src/app/album.component.html

@@ -1,119 +0,0 @@
-<div class="container">
-<h1>{{albumName}}</h1>
-
-<div class="alert alert-warning">
-    <h3>Debug Zone</h3>
-    Returned song: {{songs.length}}<br />
-    Theorical number song: {{ album ? album['Track Count'] : ""  }}
-    <span *ngIf="album && (songs.length == album['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
-    <span *ngIf="album && (songs.length != album['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
-</div>
-
-<div class="row cardAdmin">
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-yellow">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-star stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="album">{{album.Rating}}/100</h3>
-                        </div>
-                        <div><br>Rating</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-green">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-list-alt stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="album">{{album['Track Count']}}</h3>
-                        </div>
-                        <div><br>Songs</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-purple">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-headphones stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="album">{{album['Play Count']}} list.</h3>
-                        </div>
-                        <div><br>~{{album['Play Count'] / album['Track Count'] | number:'1.0-0'}} listening avg.</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-blue">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-time stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="album">{{album['Total Time'] | convertMs}}</h3>
-                        </div>
-                        <div><br>Album time</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<table class="table table-striped" (window:scroll)="onScroll($event)">
-<thead>
-    <tr>
-        <th></th>
-        <th>Name</th>
-        <th>Artist</th>
-        <th>Album</th>
-        <th>Album Artist</th>
-        <th>Play Count</th>
-    </tr>
-</thead>
-<tbody>
-    <tr *ngFor="let song of songs | sortBy : 'Track Number'">
-        <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
-        <td [title]="song.Name">{{song.Name}}</td>
-        <td [title]="song.Artist"><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
-        <td [title]="song.Album"><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
-        <td [title]="song.Album">{{song['Album Artist']}}</td>
-        <td [title]="song['Play Count']">{{song['Play Count']}}</td>
-    </tr>
-</tbody>
-</table>
-
-<button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
-    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
-</button>
-
-<!-- Go to Top Button-->
-<button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
-    aria-label="Top" (click)="scrollTop()">
-    <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
-</button>
-</div>

dashboard/src/app/album/album.component.html

@@ -0,0 +1,119 @@
+<div class="container">
+  <h1>{{albumName}}</h1>
+
+  <div class="alert alert-warning">
+      <h3>Debug Zone</h3>
+      Returned song: {{songs.length}}<br />
+      Theorical number song: {{ album ? album['Track Count'] : ""  }}
+      <span *ngIf="album && (songs.length == album['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
+      <span *ngIf="album && (songs.length != album['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
+  </div>
+
+  <div class="row cardAdmin">
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-yellow">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-star stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album.Rating}}/100</h3>
+                          </div>
+                          <div><br>Rating</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-green">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-list-alt stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album['Track Count']}}</h3>
+                          </div>
+                          <div><br>Songs</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-purple">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-headphones stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album['Play Count']}} list.</h3>
+                          </div>
+                          <div><br>~{{album['Play Count'] / album['Track Count'] | number:'1.0-0'}} listening avg.</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-blue">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-time stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album['Total Time'] | convertMs}}</h3>
+                          </div>
+                          <div><br>Album time</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+
+  <table class="table table-striped" (window:scroll)="onScroll($event)">
+  <thead>
+      <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Artist</th>
+          <th>Album</th>
+          <th>Album Artist</th>
+          <th>Play Count</th>
+      </tr>
+  </thead>
+  <tbody>
+      <tr *ngFor="let song of songs | sortBy : 'Track Number'">
+          <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
+          <td [title]="song.Name">{{song.Name}}</td>
+          <td [title]="song.Artist"><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+          <td [title]="song.Album"><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+          <td [title]="song.Album">{{song['Album Artist']}}</td>
+          <td [title]="song['Play Count']">{{song['Play Count']}}</td>
+      </tr>
+  </tbody>
+  </table>
+
+  <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
+      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
+  </button>
+
+  <!-- Go to Top Button-->
+  <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
+      aria-label="Top" (click)="scrollTop()">
+      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
+  </button>
+  </div>

dashboard/src/app/album/album.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlbumComponent } from './album.component';
+
+describe('AlbumComponent', () => {
+  let component: AlbumComponent;
+  let fixture: ComponentFixture<AlbumComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlbumComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlbumComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/album/album.component.ts

@@ -2,22 +2,22 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
 
-import { ElsService } from './els.service';
+import { ElsService } from './../els.service';
-import { Song } from './object/song';
+import { Song } from './../object/song';
-import { Album } from './object/album';
+import { Album } from './../object/album';
 
 @Component({
-  selector: 'album-component',
+  selector: 'app-album-component',
   templateUrl: './album.component.html',
-  styleUrls: [ './album.component.css', './dashboard.component.css' ]
+  styleUrls: [ './album.component.css', './../dashboard.component.css' ]
 })
 
 export class AlbumComponent implements OnInit {
   albumName = '';
   songs: Array<Song> = [];
   album: Album = new Album(); // If album not found, will be replaced by 'undefined'
-  moreDataAvailable: boolean = false;
+  moreDataAvailable = false;
-  atBottom: boolean = false;
+  atBottom = false;
 
   constructor(
     private elsService: ElsService,

dashboard/src/app/app-routing.module.ts

@@ -2,8 +2,8 @@ import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { DashboardComponent } from './dashboard.component';
-import { AlbumComponent }   from './album.component';
+import { AlbumComponent } from './album/album.component';
-import { ArtistComponent }   from './artist.component';
+import { ArtistComponent } from './artist/artist.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

dashboard/src/app/app.component.html

@@ -0,0 +1,4 @@
+<nav>
+  <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
+</nav>
+<router-outlet></router-outlet>

dashboard/src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});

dashboard/src/app/app.component.ts

@@ -1,17 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
-  template: `
+  templateUrl: './app.component.html',
-    <nav>
-      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
-      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `,
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent {
-  title = 'Tour of Heroes';
+  title = 'app';
 }

dashboard/src/app/app.module.ts

@@ -1,30 +1,23 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
-// Imports for loading & configuring the in-memory web api
-// import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-// import { InMemoryDataService }  from './in-memory-data.service';
-
 import { AppComponent } from './app.component';
 import { DashboardComponent } from './dashboard.component';
-import { AlbumComponent }      from './album.component';
+import { AlbumComponent } from './album/album.component';
-import { ArtistComponent }     from './artist.component';
+import { ArtistComponent } from './artist/artist.component';
 
 import { ElsService } from './els.service';
 
 import { AppRoutingModule } from './app-routing.module';
 
 import { ConvertMsPipe } from './convertms.pipe';
-import { SortPipe }      from './sortby.pipe';
+import { SortByPipe } from './sort-by.pipe';
 
 @NgModule({
   imports: [
     BrowserModule,
-    FormsModule,
     HttpModule,
-    // InMemoryWebApiModule.forRoot(InMemoryDataService),
     AppRoutingModule
   ],
   declarations: [
@@ -33,7 +26,7 @@ import { SortPipe }      from './sortby.pipe';
     AlbumComponent,
     ArtistComponent,
     ConvertMsPipe,
-    SortPipe
+    SortByPipe
   ],
   providers: [
     ElsService

dashboard/src/app/artist.component.html

@@ -1,126 +0,0 @@
-<div class="container">
-<h1>{{artistName}}</h1>
-
-<div class="alert alert-warning">
-    <h3>Debug Zone</h3>
-    Returned song: {{songs.length}}<br />
-    Theorical song: {{ artist ? artist['Track Count'] : ""  }}
-    <span *ngIf="artist && (songs.length == artist['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
-    <span *ngIf="artist && (songs.length != artist['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
-</div>
-
-<div class="row cardAdmin">
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-yellow">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-star stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="artist">{{artist.Rating}}/100</h3>
-                        </div>
-                        <div>Rating</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-blue">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-cd stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="artist">{{artist.Album?.length}}</h3>
-                        </div>
-                        <div>Albums</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-green">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-list-alt stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="artist">{{artist['Track Count']}}</h3>
-                        </div>
-                        <div>Songs</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-3 col-md-3">
-        <div class="panel panel-purple">
-            <div class="panel-heading">
-                <div class="row">
-                    <div class="col-xs-3">
-                        <span class="glyphicon glyphicon-headphones stats_icon"></span>
-                    </div>
-                    <div class="col-xs-9 text-right">
-                        <div>
-                            <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="artist">{{artist['Play Count']}} list.</h3>
-                        </div>
-                        <div *ngIf="artist">~{{artist['Play Count'] / artist['Track Count'] | number:'1.0-0'}} listening avg.</div>
-                        <div *ngIf="!artist">Listening</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<table class="table table-striped" (window:scroll)="onScroll($event)">
-<thead>
-    <tr>
-        <th></th>
-        <th>Name</th>
-        <th>Album</th>
-        <th>Year</th>
-        <th>Artist</th>
-        <th>Album Artist</th>
-        <th>Play Count</th>
-    </tr>
-</thead>
-<tbody>
-    <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Track Number'">
-        <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
-        <td>{{song.Name}}</td>
-        <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
-        <td>{{song.Year}}</td>
-        <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
-        <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
-        <td>{{song['Play Count']}}</td>
-    </tr>
-</tbody>
-</table>
-
-<button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
-    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
-</button>
-
-<!-- Go to Top Button-->
-<button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
-    aria-label="Top" (click)="scrollTop()" title="Go back to Top!">
-    <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
-</button>
-<button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="sortable"
-    aria-label="Top" (click)="sort()" title="Sort by Album & Track Number">
-    <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
-</button>
-</div>

dashboard/src/app/artist/artist.component.html

@@ -0,0 +1,126 @@
+<div class="container">
+  <h1>{{artistName}}</h1>
+
+  <div class="alert alert-warning">
+      <h3>Debug Zone</h3>
+      Returned song: {{songs.length}}<br />
+      Theorical song: {{ artist ? artist['Track Count'] : ""  }}
+      <span *ngIf="artist && (songs.length == artist['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
+      <span *ngIf="artist && (songs.length != artist['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
+  </div>
+
+  <div class="row cardAdmin">
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-yellow">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-star stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist.Rating}}/100</h3>
+                          </div>
+                          <div>Rating</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-blue">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-cd stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist.Album?.length}}</h3>
+                          </div>
+                          <div>Albums</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-green">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-list-alt stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist['Track Count']}}</h3>
+                          </div>
+                          <div>Songs</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3">
+          <div class="panel panel-purple">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-headphones stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist['Play Count']}} list.</h3>
+                          </div>
+                          <div *ngIf="artist">~{{artist['Play Count'] / artist['Track Count'] | number:'1.0-0'}} listening avg.</div>
+                          <div *ngIf="!artist">Listening</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+
+  <table class="table table-striped" (window:scroll)="onScroll($event)">
+  <thead>
+      <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Album</th>
+          <th>Year</th>
+          <th>Artist</th>
+          <th>Album Artist</th>
+          <th>Play Count</th>
+      </tr>
+  </thead>
+  <tbody>
+      <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Track Number'">
+          <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
+          <td>{{song.Name}}</td>
+          <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+          <td>{{song.Year}}</td>
+          <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+          <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
+          <td>{{song['Play Count']}}</td>
+      </tr>
+  </tbody>
+  </table>
+
+  <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
+      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
+  </button>
+
+  <!-- Go to Top Button-->
+  <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
+      aria-label="Top" (click)="scrollTop()" title="Go back to Top!">
+      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
+  </button>
+  <button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="sortable"
+      aria-label="Top" (click)="sort()" title="Sort by Album & Track Number">
+      <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
+  </button>
+  </div>

dashboard/src/app/artist/artist.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArtistComponent } from './artist.component';
+
+describe('ArtistComponent', () => {
+  let component: ArtistComponent;
+  let fixture: ComponentFixture<ArtistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ArtistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArtistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/artist/artist.component.ts

@@ -2,16 +2,16 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
 
-import { ElsService } from './els.service';
+import { ElsService } from './../els.service';
-import { Song } from './object/song';
+import { Song } from './../object/song';
-import { Artist } from './object/artist';
+import { Artist } from './../object/artist';
 
-import { SortPipe } from './sortby.pipe';
+import { SortByPipe } from './../sort-by.pipe';
 
 @Component({
-  selector: 'artist-component',
+  selector: 'app-artist-component',
   templateUrl: './artist.component.html',
-  styleUrls: [ './album.component.css', './dashboard.component.css' ]
+  styleUrls: [ './../album/album.component.css', './../dashboard.component.css' ]
 })
 
 export class ArtistComponent implements OnInit {
@@ -19,11 +19,11 @@ export class ArtistComponent implements OnInit {
   songs: Array<Song> = [];
   artist: Artist = new Artist();
   // To activate button in interface var
-  moreDataAvailable: boolean = false;
+  moreDataAvailable = false;
-  atBottom: boolean = false;
+  atBottom = false;
-  sortable: boolean = false;
+  sortable = false;
 
-  lockLoadData: boolean = false;
+  lockLoadData = false;
 
   constructor(
     private elsService: ElsService,
@@ -41,7 +41,7 @@ export class ArtistComponent implements OnInit {
   // TODO Duplicate code!
   loadSongs(): void {
     if (this.lockLoadData) {
-      console.debug('Loading data locked');
+      console.log('Loading data locked');
       return;
     }
 
@@ -60,7 +60,7 @@ export class ArtistComponent implements OnInit {
             this.songs.push(song);
           });
         }
-        console.debug('Unlock load data');
+        console.log('Unlock load data');
         this.lockLoadData = false;
       }
     );
@@ -93,7 +93,7 @@ export class ArtistComponent implements OnInit {
   }
 
   sort(): void {
-    this.songs = new SortPipe().transform(this.songs, 'Year', 'Album', 'Track Number', 'Play Count');
+    this.songs = new SortByPipe().transform(this.songs, 'Year', 'Album', 'Track Number', 'Play Count');
     this.sortable = false;
   }
 }

dashboard/src/app/convertms.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ConvertmsPipe } from './convertms.pipe';
+
+describe('ConvertmsPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ConvertmsPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/convertms.pipe.ts

@@ -1,11 +1,14 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({name: 'convertMs'})
+@Pipe({
+  name: 'convertMs'
+})
 export class ConvertMsPipe implements PipeTransform {
+
   transform(timeMs: number): string {
     let x = timeMs / 1000;
 
-    let seconds = Math.round(x % 60);
+    const seconds = Math.round(x % 60);
     x /= 60;
 
     let minutes = 0;
@@ -16,7 +19,7 @@ export class ConvertMsPipe implements PipeTransform {
     if (x > 1) { hours = Math.round(x % 24); }
     // TODO Enable/disable day
     x /= 24;
-    let days = Math.round(x);
+    const days = Math.round(x);
 
     // Final string
     let ret = '';

dashboard/src/app/dashboard.component.ts

@@ -5,19 +5,19 @@ import { Song } from './object/song';
 import { Bucket } from './object/bucket';
 
 @Component({
-  selector: 'my-dashboard',
+  selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: [ './dashboard.component.css' ]
 })
 
 export class DashboardComponent implements OnInit {
-  totalTime: number = 0;
+  totalTime = 0;
-  totalSize: number = 0;
+  totalSize = 0;
   totalSizeSt = '';
-  trackCountSong: number = 0;
+  trackCountSong = 0;
-  trackCountArtist: number = 0;
+  trackCountArtist = 0;
-  trackCountAlbum: number = 0;
+  trackCountAlbum = 0;
-  neverListenSong: number = 0;
+  neverListenSong = 0;
 
   topGenres: Bucket[] = [];
   bottomGenres: Bucket[] = [];
@@ -61,13 +61,13 @@ export class DashboardComponent implements OnInit {
    */
 
   convertSizeToString(size: number) {
-    let units = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+    const units = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
 
     if (size === 0) {
       return '0 Byte';
     }
 
-    let i = Math.floor(Math.log(size) / Math.log(1024));
+    const i = Math.floor(Math.log(size) / Math.log(1024));
     let calcSize = size / Math.pow(1024, i);
     calcSize = Math.round(calcSize * 100) / 100;
 

dashboard/src/app/els.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ElsService } from './els.service';
+
+describe('ElsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ElsService]
+    });
+  });
+
+  it('should be created', inject([ElsService], (service: ElsService) => {
+    expect(service).toBeTruthy();
+  }));
+});

dashboard/src/app/els.service.ts

@@ -117,7 +117,7 @@ export class ElsService {
         return res.json().hits.hits;
       })
       .map((hits: Array<any>) => {
-        let result: Array<Song> = [];
+        const result: Array<Song> = [];
         hits.forEach((hit) => {
           result.push(hit._source);
         });
@@ -134,7 +134,7 @@ export class ElsService {
   }
 
   getAlbumSongs(albumName: string, from: number = 0): Observable<Song[]> {
-    console.debug('getAlbumSongs- Album name: ' + albumName + ' - from: ' + from);
+    console.info('getAlbumSongs- Album name: ' + albumName + ' - from: ' + from);
     return this.http
       .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
             JSON.stringify({
@@ -148,7 +148,7 @@ export class ElsService {
         return res.json().hits.hits;
       })
       .map((hits: Array<any>) => {
-        let result: Array<Song> = [];
+        const result: Array<Song> = [];
         hits.forEach((hit) => {
           result.push(hit._source);
         });
@@ -157,7 +157,7 @@ export class ElsService {
   }
 
   getArtistSongs(artistName: string, from: number = 0): Observable<Song[]> {
-    console.debug('getArtistSongs- Artist name: ' + artistName + ' - from: ' + from);
+    console.info('getArtistSongs- Artist name: ' + artistName + ' - from: ' + from);
     return this.http
       .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
             JSON.stringify({
@@ -176,7 +176,7 @@ export class ElsService {
         return res.json().hits.hits;
       })
       .map((hits: Array<any>) => {
-        let result: Array<Song> = [];
+        const result: Array<Song> = [];
         hits.forEach((hit) => {
           result.push(hit._source);
         });
@@ -251,7 +251,7 @@ export class ElsService {
             }), {headers: this.headers})
       .map(res => res.json().aggregations.genres.buckets)
       .map((hits: Array<any>) => {
-        let result: Array<Bucket> = [];
+        const result: Array<Bucket> = [];
         hits.forEach((bucket) => {
           result.push(bucket);
         });

dashboard/src/app/object/album.ts

@@ -4,10 +4,10 @@ export class Album {
     Artist: Array<string>;
     Rating: number;
     Genre: Array<string>;
-    "Track Count": number;
+    'Track Count': number;
-    "Album Rating": number;
+    'Album Rating': number;
-    "Persistent ID": string;
+    'Persistent ID': string;
-    "Album Rating Computed":  boolean;
+    'Album Rating Computed':  boolean;
-    "Play Count": number;
+    'Play Count': number;
-    "Total Time": number;
+    'Total Time': number;
 }

dashboard/src/app/object/artist.ts

@@ -4,7 +4,7 @@ export class Artist {
     Artist: string;
     Rating: number;
     Genre: Array<string>;
-    "Track Count": number;
+    'Track Count': number;
-    "Persistent ID": string;
+    'Persistent ID': string;
-    "Play Count": number;
+    'Play Count': number;
 }

dashboard/src/app/object/song.ts

@@ -1,7 +1,7 @@
 export class Song {
     Name: string;
     Artist: string;
-    "Play Count": number;
+    'Play Count': number;
     Album: string;
-    "Track Number": number; // TODO Default property
+    'Track Number': number; // TODO Default property
 }

dashboard/src/app/sort-by.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SortByPipe } from './sort-by.pipe';
+
+describe('SortByPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SortByPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/sort-by.pipe.ts

@@ -1,14 +1,14 @@
-// Thank to http://4dev.tech/2016/09/angular2-how-to-sort-a-json-dataset-by-field/ for the pipe
-// Thank to http://stackoverflow.com/questions/28560801/javascript-sorting-array-by-multiple-criteria for the multi-args part
-
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({name: 'sortBy'})
+@Pipe({
-export class SortPipe implements PipeTransform {
+  name: 'sortBy'
+})
+export class SortByPipe implements PipeTransform {
+
   transform(array: Array<any>, ...args: any[]): Array<any> {
     array.sort((a: any, b: any) => {
       for (let i = 0; i < array.length; i++) {
-        let arg = args[i];
+        const arg = args[i];
 
         if (a[arg] === undefined && b[arg] !== undefined) { return -1; }
         if (a[arg] !== undefined && b[arg] === undefined) { return 1; }
@@ -20,4 +20,5 @@ export class SortPipe implements PipeTransform {
     });
     return array;
   }
+
 }

dashboard/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

dashboard/src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

dashboard/src/index.html

@@ -1,29 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
-<html>
+<html lang="en">
 <head>
-    <title>Music Dashboard</title>
+  <meta charset="utf-8">
+  <title>Dashboard</title>
   <base href="/">
-    <meta charset="UTF-8">
+
   <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <script src="node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
 </head>
-
 <body>
-    <my-app>Loading AppComponent content here ...</my-app>
+  <app-root></app-root>
 </body>
 </html>

dashboard/src/main.js

@@ -1,5 +0,0 @@
-"use strict";
-var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
-var app_module_1 = require("./app/app.module");
-platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);
-//# sourceMappingURL=main.js.map

dashboard/src/main.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";AAAA,8EAA2E;AAE3E,+CAA6C;AAE7C,iDAAsB,EAAE,CAAC,eAAe,CAAC,sBAAS,CAAC,CAAC"}

dashboard/src/main.ts

@@ -1,5 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

dashboard/src/polyfills.ts

@@ -0,0 +1,72 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';

dashboard/src/systemjs-angular-loader.js

@@ -1,49 +0,0 @@
-var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
-var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
-var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
-
-module.exports.translate = function(load){
-  if (load.source.indexOf('moduleId') != -1) return load;
-
-  var url = document.createElement('a');
-  url.href = load.address;
-
-  var basePathParts = url.pathname.split('/');
-
-  basePathParts.pop();
-  var basePath = basePathParts.join('/');
-
-  var baseHref = document.createElement('a');
-  baseHref.href = this.baseURL;
-  baseHref = baseHref.pathname;
-
-  if (!baseHref.startsWith('/base/')) { // it is not karma
-    basePath = basePath.replace(baseHref, '');
-  }
-
-  load.source = load.source
-    .replace(templateUrlRegex, function(match, quote, url){
-      var resolvedUrl = url;
-
-      if (url.startsWith('.')) {
-        resolvedUrl = basePath + url.substr(1);
-      }
-
-      return 'templateUrl: "' + resolvedUrl + '"';
-    })
-    .replace(stylesRegex, function(match, relativeUrls) {
-      var urls = [];
-
-      while ((match = stringRegex.exec(relativeUrls)) !== null) {
-        if (match[2].startsWith('.')) {
-          urls.push('"' + basePath + match[2].substr(1) + '"');
-        } else {
-          urls.push('"' + match[2] + '"');
-        }
-      }
-
-      return "styleUrls: [" + urls.join(', ') + "]";
-    });
-
-  return load;
-};

dashboard/src/systemjs.config.extras.js

@@ -1,11 +0,0 @@
-/**
- * Add barrels and stuff
- * Adjust as necessary for your application needs.
- */
-// (function (global) {
-//   System.config({
-//     packages: {
-//       // add packages here
-//     }
-//   });
-// })(this);

dashboard/src/systemjs.config.js

@@ -1,45 +0,0 @@
-/**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-  System.config({
-    paths: {
-      // paths serve as alias
-      'npm:': 'node_modules/'
-    },
-    // map tells the System loader where to look for things
-    map: {
-      // our app is within the app folder
-      'app': 'app',
-
-      // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-
-      // other libraries
-      'rxjs':                      'npm:rxjs',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
-    },
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      app: {
-        defaultExtension: 'js',
-        meta: {
-          './*.js': {
-            loader: 'systemjs-angular-loader.js'
-          }
-        }
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      }
-    }
-  });
-})(this);

dashboard/src/test.ts

@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare const __karma__: any;
+declare const require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

dashboard/src/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

dashboard/src/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [ "es2015", "dom" ],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
-  }
-}

dashboard/src/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

dashboard/src/typings.d.ts

@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

dashboard/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}

dashboard/tslint.json

@@ -1,5 +1,10 @@
 {
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
   "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
     "class-name": true,
     "comment-format": [
       true,
@@ -8,12 +13,17 @@
     "curly": true,
     "eofline": true,
     "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
+    "import-spacing": true,
     "indent": [
       true,
       "spaces"
     ],
+    "interface-over-type-literal": true,
     "label-position": true,
-    "label-undefined": true,
     "max-line-length": [
       true,
       140
@@ -21,32 +31,43 @@
     "member-access": false,
     "member-ordering": [
       true,
-      "static-before-instance",
+      {
-      "variables-before-functions"
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
     ],
     "no-arg": true,
     "no-bitwise": true,
     "no-console": [
-      false,
+      true,
       "debug",
-      "info",
       "time",
       "timeEnd",
       "trace"
     ],
     "no-construct": true,
     "no-debugger": true,
-    "no-duplicate-key": true,
+    "no-duplicate-super": true,
-    "no-duplicate-variable": true,
     "no-empty": false,
+    "no-empty-interface": true,
     "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
     "no-shadowed-variable": true,
     "no-string-literal": false,
+    "no-string-throw": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-unreachable": true,
     "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
@@ -57,12 +78,14 @@
       "check-else",
       "check-whitespace"
     ],
+    "prefer-const": true,
     "quotemark": [
       true,
       "single"
     ],
     "radix": true,
     "semicolon": [
+      true,
       "always"
     ],
     "triple-equals": [
@@ -79,6 +102,8 @@
         "variable-declaration": "nospace"
       }
     ],
+    "typeof-compare": true,
+    "unified-signatures": true,
     "variable-name": false,
     "whitespace": [
       true,
@@ -87,6 +112,30 @@
       "check-operator",
       "check-separator",
       "check-type"
-    ]
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
   }
 }