Merge branch 'task/lazy-loading' of hardi/opt-cc into master

minify.sh

@@ -4,12 +4,12 @@
 cd $(dirname $0)
 
 # array of files to minify
-FILES=(inline main polyfills scripts styles vendor)
+FILES=(inline.bundle main.bundle polyfills.bundle scripts.bundle styles.bundle vendor.bundle 0.chunk 1.chunk 2.chunk 3.chunk 4.chunk 5.chunk 6.chunk 7.chunk)
 OPTIONS="-c toplevel,dead_code=true,unused=true"
 
 for i in "${FILES[@]}"
 do
   echo "minify ${i} ..."
-  $(npm bin)/uglifyjs public/${i}.bundle.js ${OPTIONS} -o public/${i}.bundle.js
+  $(npm bin)/uglifyjs public/${i}.js ${OPTIONS} -o public/${i}.js
-  rm -f public/${i}.bundle.js.map
+  rm -f public/${i}.js.map
 done

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "license": "MIT",
   "private": true,
   "scripts": {

static/e2e/test.e2e-spec.ts

@@ -1,4 +1,4 @@
-import {browser, element, by} from 'protractor';
+import {browser, by, element} from 'protractor';
 
 
 describe('Main Page Access', function () {
@@ -7,7 +7,7 @@ describe('Main Page Access', function () {
     browser.get('/')
   });
 
-  it('should open army overview initially', async() => {
+  it('should open army overview initially', async () => {
     let elem = element(by.css('h1'));
     let text = elem.getText();
     expect(text).toBe("Übersicht über alle Spieler, Squads und Armeen");

static/karma.conf.js

@@ -13,13 +13,13 @@ module.exports = function (config) {
       require('@angular/cli/plugins/karma')
     ],
     files: [
-      { pattern: './src/test.ts', watched: false }
+      {pattern: './src/test.ts', watched: false}
     ],
     preprocessors: {
       './src/test.ts': ['@angular/cli']
     },
     mime: {
-      'text/x-typescript': ['ts','tsx']
+      'text/x-typescript': ['ts', 'tsx']
     },
     remapIstanbulReporter: {
       reports: {
@@ -32,8 +32,8 @@ module.exports = function (config) {
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['spec', 'karma-remap-istanbul']
+      ? ['spec', 'karma-remap-istanbul']
-              : ['spec'],
+      : ['spec'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

static/package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
+    "@types/systemjs": "^0.20.4",
     "codelyzer": "~2.0.0-beta.1",
     "jasmine-core": "^2.5.2",
     "jasmine-spec-reporter": "^3.2.0",

static/protractor-html-reporter.conf.js

@@ -29,23 +29,24 @@ exports.config = {
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function() {}
+    print: function () {
+    }
   },
   useAllAngular2AppRoots: true,
-  beforeLaunch: function() {
+  beforeLaunch: function () {
     require('ts-node').register({
       project: 'e2e'
     });
-    return new Promise(function(resolve){
+    return new Promise(function (resolve) {
       reporter.beforeLaunch(resolve);
     });
   },
-  afterLaunch: function(exitCode) {
+  afterLaunch: function (exitCode) {
-    return new Promise(function(resolve){
+    return new Promise(function (resolve) {
       reporter.afterLaunch(resolve.bind(this, exitCode));
     });
   },
-  onPrepare: function() {
+  onPrepare: function () {
     jasmine.getEnv().addReporter(reporter);
     jasmine.getEnv().addReporter(new SpecReporter());
   },

static/protractor.conf.js

@@ -1,9 +1,9 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const {SpecReporter} = require('jasmine-spec-reporter');
 
-exports.config= {
+exports.config = {
   allScriptsTimeout: 11000,
   specs: [
     './e2e/**/*.e2e-spec.ts'
@@ -17,14 +17,15 @@ exports.config= {
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function() {}
+    print: function () {
+    }
   },
-  beforeLaunch: function() {
+  beforeLaunch: function () {
     require('ts-node').register({
       project: 'e2e/tsconfig.e2e.json'
     });
   },
   onPrepare() {
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
   }
 };

static/src/app/admin/admin.component.ts

@@ -61,7 +61,7 @@ export class AdminComponent {
   /**
    * compare ngValue with ngModel to assign selected element
    */
-  equals(o1: Squad , o2: Squad) {
+  equals(o1: Squad, o2: Squad) {
     if (o1 && o2) {
       return o1._id === o2._id;
     }

static/src/app/admin/admin.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from "@angular/core";
+import {AdminComponent} from "./admin.component";
+import {SharedModule} from "../shared.module";
+import {AppUserStore} from "../services/stores/app-user.store";
+import {AppUserService} from "../services/app-user-service/app-user.service";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+
+@NgModule({
+  declarations: [AdminComponent],
+  imports: [CommonModule, SharedModule, RouterModule.forChild([{path: '', component: AdminComponent}])],
+  providers: [AppUserStore, AppUserService]
+})
+export class AdminModule {
+}

static/src/app/app.component.css

@@ -47,11 +47,19 @@ unprocessed-child:hover {
 
 /* Safari 4.0 - 8.0 */
 @-webkit-keyframes color-blink {
-  from {background-color: #222222;}
+  from {
-  to {background-color: orange;}
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
 }
 
 @keyframes color-blink {
-  from {background-color: #222222;}
+  from {
-  to {background-color: orange;}
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
 }

static/src/app/app.component.html

@@ -45,25 +45,29 @@
             </a>
             <ul class="dropdown-menu">
               <li>
-                <a routerLink="{{config.requestPromotionPath}}">Beförderung</a>
+                <a routerLink="{{config.request}}/{{config.requestPromotionPath}}">Beförderung</a>
               </li>
               <li>
-                <a routerLink="{{config.requestAwardPath}}">Orden/ Auszeichnung</a>
+                <a routerLink="{{config.request}}/{{config.requestAwardPath}}">Orden/ Auszeichnung</a>
               </li>
             </ul>
           </li>
           <li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" class="dropdown">
-            <a href="#"  [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+            <a href="#"
+               [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
+               class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">
               Anträge
               <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
               <li>
-                <a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}" routerLink="{{config.confirmPromotionPath}}">Beförderung</a>
+                <a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
+                   routerLink="{{config.request}}/{{config.confirmPromotionPath}}">Beförderung</a>
               </li>
               <li>
-                <a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}" routerLink="{{config.confirmAwardPath}}">Orden/ Auszeichnung</a>
+                <a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
+                   routerLink="{{config.request}}/{{config.confirmAwardPath}}">Orden/ Auszeichnung</a>
               </li>
             </ul>
           </li>
@@ -73,8 +77,8 @@
           <li *ngIf="loginService.hasPermission(4)" routerLinkActive="active">
             <a routerLink='{{config.adminPanelPath}}' class="link">Admin Panel</a>
           </li>
-          <li *ngIf="authEnabled" class="link" style="cursor: pointer">
+          <li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
-            <a *ngIf="loginService.isLoggedIn()" (click)="logout()">Abmelden</a>
+            <a (click)="logout()">Abmelden</a>
           </li>
         </ul>
       </div>

static/src/app/app.component.ts

@@ -1,7 +1,6 @@
-import {Component, Inject, Optional} from '@angular/core';
+import {Component} from '@angular/core';
 import {Router} from '@angular/router';
 import {LoginService} from './services/login-service/login-service';
-import {AUTH_ENABLED} from './app.tokens';
 import {PromotionService} from "./services/promotion-service/promotion.service";
 import {AwardingService} from "./services/awarding-service/awarding.service";
 import {RouteConfig} from "./app.config";
@@ -15,8 +14,7 @@ export class AppComponent {
 
   config = RouteConfig;
 
-  constructor(@Optional() @Inject(AUTH_ENABLED) public authEnabled,
+  constructor(private loginService: LoginService,
-              private loginService: LoginService,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private router: Router) {

static/src/app/app.config.ts

@@ -1,20 +1,19 @@
-
 export class AppConfig {
 
   public readonly apiUrl = '/api';
 
-  public readonly apiAppUserPath        = this.apiUrl + '/account/';
+  public readonly apiAppUserPath = this.apiUrl + '/account/';
-  public readonly apiAwardPath          = this.apiUrl + '/awardings';
+  public readonly apiAwardPath = this.apiUrl + '/awardings';
-  public readonly apiDecorationPath     = this.apiUrl + '/decorations/';
+  public readonly apiDecorationPath = this.apiUrl + '/decorations/';
   public readonly apiAuthenticationPath = this.apiUrl + '/authenticate';
-  public readonly apiSignupPath         = this.apiUrl + '/authenticate/signup';
+  public readonly apiSignupPath = this.apiUrl + '/authenticate/signup';
-  public readonly apiRankPath           = this.apiUrl + '/ranks/';
+  public readonly apiRankPath = this.apiUrl + '/ranks/';
-  public readonly apiSquadPath          = this.apiUrl + '/squads/';
+  public readonly apiSquadPath = this.apiUrl + '/squads/';
-  public readonly apiUserPath           = this.apiUrl + '/users/';
+  public readonly apiUserPath = this.apiUrl + '/users/';
-  public readonly apiOverviewPath       = this.apiUrl + '/overview';
+  public readonly apiOverviewPath = this.apiUrl + '/overview';
-  public readonly apiRequestAwardPath   = this.apiUrl + '/request/award';
+  public readonly apiRequestAwardPath = this.apiUrl + '/request/award';
-  public readonly apiPromotionPath      = this.apiUrl + '/request/promotion';
+  public readonly apiPromotionPath = this.apiUrl + '/request/promotion';
-  public readonly apiWarPath            = this.apiUrl + '/wars';
+  public readonly apiWarPath = this.apiUrl + '/wars';
 
 }
 
@@ -28,8 +27,9 @@ export const RouteConfig = {
   statsPath: 'stats',
   userPath: 'users',
   overviewPath: 'overview',
-  requestAwardPath: 'request-award',
+  request: 'request',
-  requestPromotionPath: 'request-promotion',
+  requestAwardPath: 'award',
+  requestPromotionPath: 'promotion',
   confirmAwardPath: 'confirm-award',
   confirmPromotionPath: 'confirm-promotion'
 }

static/src/app/app.module.ts

@@ -1,56 +1,38 @@
 import {NgModule} from '@angular/core';
-import {Title, BrowserModule} from "@angular/platform-browser";
+import {BrowserModule} from "@angular/platform-browser";
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
 import {AppComponent} from './app.component';
 import {LoginService} from "./services/login-service/login-service";
-import {UserStore} from "./services/stores/user.store";
-import {ShowErrorComponent} from './common/show-error/show-error.component';
-import {APPLICATION_VALIDATORS} from './models/app-validators';
 import {appRouting, routingComponents, routingProviders} from './app.routing';
-import {AUTH_ENABLED} from './app.tokens';
-import {UserService} from "./services/user-service/user.service";
-import {UserItemComponent} from "./users/user-list/user-item.component";
 import {SquadService} from "./services/squad-service/squad.service";
 import {SquadStore} from "./services/stores/squad.store";
 import {DecorationStore} from "./services/stores/decoration.store";
 import {DecorationService} from "./services/decoration-service/decoration.service";
-import {SquadItemComponent} from "./squads/squad-list/squad-item.component";
-import {DecorationComponent} from "./decorations/decoration.component";
-import {RankItemComponent} from "./ranks/rank-list/rank-item.component";
 import {RankStore} from "./services/stores/rank.store";
 import {RankService} from "./services/rank-service/rank.service";
-import {DecorationItemComponent} from "./decorations/decoration-list/decoration-item.component";
 import {AppConfig} from "./app.config";
 import {LoginGuardAdmin, LoginGuardHL, LoginGuardSQL} from "./login/login.guard";
 import {AwardingService} from "./services/awarding-service/awarding.service";
 import {HttpClient} from "./services/http-client";
 import {ArmyService} from "./services/army-service/army.service";
-import { ClipboardModule } from 'ngx-clipboard';
+import {ClipboardModule} from 'ngx-clipboard';
-import {AppUserService} from "./services/app-user-service/app-user.service";
-import {AppUserStore} from "./services/stores/app-user.store";
 import {PromotionService} from "./services/promotion-service/promotion.service";
-import {FilterRankPipe} from "./filter/filter.pipe";
+import {SharedModule} from "./shared.module";
-import {WarService} from "./services/war-service/war.service";
-import {DataTableModule} from "angular2-datatable";
-import {NgxChartsModule} from "@swimlane/ngx-charts";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
-import {AccordionModule, CarouselModule} from "ngx-bootstrap";
+import {UserService} from "./services/user-service/user.service";
+import {UserStore} from "./services/stores/user.store";
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
+  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule],
-    BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot(), CarouselModule.forRoot()],
   providers: [
     HttpClient,
     LoginService,
     LoginGuardSQL,
     LoginGuardHL,
     LoginGuardAdmin,
-    ArmyService,
-    AppUserService,
-    AppUserStore,
     UserService,
     UserStore,
+    ArmyService,
     SquadService,
     SquadStore,
     DecorationService,
@@ -59,23 +41,12 @@ import {AccordionModule, CarouselModule} from "ngx-bootstrap";
     RankStore,
     AwardingService,
     PromotionService,
-    WarService,
     AppConfig,
-    Title,
     routingProviders,
-    {provide: AUTH_ENABLED, useValue: true}
   ],
   declarations: [
     AppComponent,
-    routingComponents,
+    routingComponents],
-    DecorationComponent,
-    DecorationItemComponent,
-    RankItemComponent,
-    FilterRankPipe,
-    UserItemComponent,
-    SquadItemComponent,
-    ShowErrorComponent,
-    APPLICATION_VALIDATORS],
   bootstrap: [AppComponent]
 })
 export class AppModule {

static/src/app/app.routing.ts

@@ -2,51 +2,74 @@ import {RouterModule, Routes} from "@angular/router";
 import {LoginComponent} from "./login/index";
 import {NotFoundComponent} from "./common/not-found/not-found.component";
 import {LoginGuardAdmin, LoginGuardHL, LoginGuardMT, LoginGuardSQL} from "./login/login.guard";
-import {usersRoutes, usersRoutingComponents} from "./users/users.routing";
-import {squadsRoutes, squadsRoutingComponents} from "./squads/squads.routing";
-import {decorationsRoutes, decorationsRoutingComponents} from "./decorations/decoration.routing";
-import {ranksRoutes, ranksRoutingComponents} from "./ranks/ranks.routing";
 import {armyRoutes, armyRoutingComponents} from "./army/army.routing";
 import {SignupComponent} from "./login/signup.component";
-import {AdminComponent} from "./admin/admin.component";
-import {RequestAwardComponent} from "./request/award/req-award.component";
-import {RequestPromotionComponent} from "./request/promotion/req-promotion.component";
-import {ConfirmPromotionComponent} from "./request/confirm-promotion/confirm-promotion.component";
-import {ConfirmAwardComponent} from "./request/confirm-award/confirm-award.component";
 import {RouteConfig} from "./app.config";
-import {statsRoutes, statsRoutingComponents} from "./statistic/stats.routing";
 
 export const appRoutes: Routes = [
+  {
+    path: RouteConfig.overviewPath,
+    children: armyRoutes
+  },
+  {
+    path: '', redirectTo: RouteConfig.overviewPath,
+    pathMatch: 'full'
+  },
+  {
+    path: RouteConfig.statsPath,
+    loadChildren: './statistic/stats.module#StatsModule'
+  },
+  {
+    path: RouteConfig.loginPath,
+    component: LoginComponent
+  },
+  {
+    path: RouteConfig.signUpPath,
+    component: SignupComponent
+  },
+  {
+    path: RouteConfig.request,
+    loadChildren: './request/request.module#RequestModule'
+  },
+  {
+    path: RouteConfig.userPath,
+    loadChildren: './users/users.module#UsersModule',
+    canActivate: [LoginGuardHL]
+  },
+  {
+    path: RouteConfig.squadPath,
+    loadChildren: './squads/squads.module#SquadsModule',
+    canActivate: [LoginGuardHL]
+  },
+  {
+    path: RouteConfig.decorationPath,
+    loadChildren: './decorations/decoration.module#DecorationsModule',
+    canActivate: [LoginGuardHL]
+  },
+  {
+    path: RouteConfig.rankPath,
+    loadChildren: './ranks/ranks.module#RanksModule',
+    canActivate: [LoginGuardHL]
+  },
+  {
+    path: RouteConfig.adminPanelPath,
+    loadChildren: './admin/admin.module#AdminModule',
+    canActivate: [LoginGuardAdmin]
+  },
 
-  {path: RouteConfig.overviewPath, children: armyRoutes},
+  /** Redirect Configuration **/
-  {path: '', redirectTo: RouteConfig.overviewPath, pathMatch: 'full'},
+  {
-
+    path: '404',
-  {path: RouteConfig.statsPath, children: statsRoutes},
+    component: NotFoundComponent
-
+  },
-  {path: RouteConfig.loginPath, component: LoginComponent},
+  {
-  {path: RouteConfig.signUpPath, component: SignupComponent},
+    path: '**',
-
+    redirectTo: '/404'
-  {path: RouteConfig.requestAwardPath, component: RequestAwardComponent, canActivate: [LoginGuardSQL]},
+  } // always configure this last - first matching route gets processed
-  {path: RouteConfig.requestPromotionPath, component: RequestPromotionComponent, canActivate: [LoginGuardSQL]},
-  {path: RouteConfig.confirmAwardPath, component: ConfirmAwardComponent, canActivate: [LoginGuardHL]},
-  {path: RouteConfig.confirmPromotionPath, component: ConfirmPromotionComponent, canActivate: [LoginGuardHL]},
-
-  {path: RouteConfig.userPath, children: usersRoutes, canActivate: [LoginGuardHL]},
-  {path: RouteConfig.squadPath, children: squadsRoutes, canActivate: [LoginGuardHL]},
-  {path: RouteConfig.decorationPath, children: decorationsRoutes, canActivate: [LoginGuardHL]},
-  {path: RouteConfig.rankPath, children: ranksRoutes, canActivate: [LoginGuardHL]},
-
-  {path: RouteConfig.adminPanelPath, component: AdminComponent, canActivate: [LoginGuardAdmin]},
-
-  /** Redirect Konfigurationen **/
-  {path: '404', component: NotFoundComponent},
-  {path: '**', redirectTo: '/404'}, // immer als letztes konfigurieren - erste Route die matched wird angesteuert
 ];
 
 export const appRouting = RouterModule.forRoot(appRoutes);
 
-export const routingComponents = [LoginComponent, SignupComponent, RequestAwardComponent, RequestPromotionComponent, ConfirmAwardComponent,
+export const routingComponents = [LoginComponent, SignupComponent, ...armyRoutingComponents, NotFoundComponent];
-  ConfirmPromotionComponent, AdminComponent, ...armyRoutingComponents, NotFoundComponent, ...usersRoutingComponents,
-  ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents, ...statsRoutingComponents];
 
 export const routingProviders = [LoginGuardSQL, LoginGuardHL, LoginGuardMT, LoginGuardAdmin];

static/src/app/app.tokens.ts

@@ -1,6 +0,0 @@
-import {OpaqueToken} from '@angular/core';
-
-export const AUTH_ENABLED = new OpaqueToken('AUTH_ENABLED');
-
-export const SOCKET_IO = new OpaqueToken('socket-io');
-

static/src/app/army/army-member.component.ts

@@ -3,7 +3,7 @@ import {User} from "../models/model-interfaces";
 import {ActivatedRoute, Router} from "@angular/router";
 import {UserService} from "../services/user-service/user.service";
 import {Subscription} from "rxjs/Subscription";
-import {AppConfig, RouteConfig} from "../app.config";
+import {RouteConfig} from "../app.config";
 
 
 @Component({

static/src/app/army/army.component.html

@@ -16,7 +16,8 @@
           </div>
           <div class=" div-table-row" style="padding-left: 8px">
             <div *ngFor="let member of squad.members">
-              <div class="member-link text-blufor" (click)="select(member._id)">{{member.rank}} {{member.username}}</div>
+              <div class="member-link text-blufor" (click)="select(member._id)">{{member.rank}} {{member.username}}
+              </div>
             </div>
             <br>
             <br>

static/src/app/common/show-error/show-error.component.ts

@@ -1,5 +1,5 @@
-import {Component, Input, Optional} from '@angular/core';
+import {Component, Input} from '@angular/core';
-import {NgForm, FormGroup} from '@angular/forms';
+import {FormGroup, NgForm} from '@angular/forms';
 
 @Component({
   selector: 'show-error',

static/src/app/decorations/decoration-list/decoration-item.component.ts

@@ -8,7 +8,7 @@ import {Decoration} from "../../models/model-interfaces";
   styleUrls: ['./decoration-item.component.css', '../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['decoration', 'selected'],
-  outputs: ['decorationDelete','decorationSelected'],
+  outputs: ['decorationDelete', 'decorationSelected'],
 })
 export class DecorationItemComponent {
 

static/src/app/decorations/decoration-list/decoration-list.component.html

@@ -49,10 +49,10 @@
 
   <div>
     <pjm-decoration-item *ngFor="let decoration of decorations$ | async"
-                   [decoration]="decoration"
+                         [decoration]="decoration"
-                   (decorationDelete)="deleteDecoration(decoration)"
+                         (decorationDelete)="deleteDecoration(decoration)"
-                   (decorationSelected)="selectDecoration($event)"
+                         (decorationSelected)="selectDecoration($event)"
-                   [selected]="decoration._id == selectedDecorationId">
+                         [selected]="decoration._id == selectedDecorationId">
     </pjm-decoration-item>
   </div>
 

static/src/app/decorations/decoration.module.ts

@@ -0,0 +1,15 @@
+import {decorationRoutesModule, decorationsRoutingComponents} from "./decoration.routing";
+import {SharedModule} from "../shared.module";
+import {CommonModule} from "@angular/common";
+import {DecorationStore} from "../services/stores/decoration.store";
+import {DecorationService} from "../services/decoration-service/decoration.service";
+import {NgModule} from "@angular/core";
+
+@NgModule({
+  declarations: decorationsRoutingComponents,
+  imports: [CommonModule, SharedModule, decorationRoutesModule],
+  providers: [DecorationStore, DecorationService]
+})
+export class DecorationsModule {
+  static routes = decorationRoutesModule;
+}

static/src/app/decorations/decoration.routing.ts

@@ -1,7 +1,9 @@
-import {Routes} from "@angular/router";
+import {RouterModule, Routes} from "@angular/router";
 import {DecorationComponent} from "./decoration.component";
 import {DecorationListComponent} from "./decoration-list/decoration-list.component";
 import {EditDecorationComponent} from "./edit-decoration/edit-decoration.component";
+import {ModuleWithProviders} from "@angular/core";
+import {DecorationItemComponent} from "./decoration-list/decoration-item.component";
 
 export const decorationsRoutes: Routes = [{
   path: '', component: DecorationComponent,
@@ -23,5 +25,7 @@ export const decorationsRoutes: Routes = [{
     outlet: 'right'
   }];
 
-export const decorationsRoutingComponents = [DecorationComponent, DecorationListComponent, EditDecorationComponent];
+export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
+
+export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent, EditDecorationComponent];
 

static/src/app/decorations/edit-decoration/edit-decoration.component.html

@@ -38,7 +38,7 @@
   <div class="form-group">
     <label for="sort">Sortierung</label>
     <input id="sort" name="sort" type="number" class="form-control btn dropdown-toggle"
-            [(ngModel)]="decoration.sortingNumber">
+           [(ngModel)]="decoration.sortingNumber">
     <show-error text="Sortierung" path="sort"></show-error>
   </div>
 
@@ -51,7 +51,7 @@
   </div>
 
   <div class="form-group">
-  <label for="graphic">Bild</label>
+    <label for="graphic">Bild</label>
     <input id="graphic" name="graphic" class="ui-button form-control" type="file"
            #fileInput
            accept="image/png"

static/src/app/login/login.component.css

@@ -79,6 +79,10 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

static/src/app/login/login.guard.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
 
 @Injectable()
 export class LoginGuardSQL implements CanActivate {

static/src/app/models/app-validators.ts

@@ -1,11 +1,6 @@
 import {Directive, forwardRef} from '@angular/core';
-import {
+import {AbstractControl, FormControl, NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '@angular/forms';
-  FormControl,
-  AbstractControl,
-  NG_VALIDATORS, NG_ASYNC_VALIDATORS
-} from '@angular/forms';
 import {UserService} from "../services/user-service/user.service";
-import {Observable} from "rxjs";
 
 export function asyncIfNotBacklogThenAssignee(control): Promise<any> {
   const promise = new Promise((resolve, reject) => {

static/src/app/models/model-interfaces.ts

@@ -28,11 +28,13 @@ export interface Player {
   respawn?: number;
   flagTouch?: number;
 }
+
 export interface Campaign {
   _id?: string;
   title?: string;
   wars?: War[];
 }
+
 export interface War {
   _id?: string;
   title?: string;

static/src/app/ranks/edit-rank/edit-rank.component.ts

@@ -30,7 +30,7 @@ export class EditRankComponent {
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private rankService : RankService) {
+              private rankService: RankService) {
   }
 
   ngOnInit() {

static/src/app/ranks/ranks.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from "@angular/core";
+import {rankRouterModule, ranksRoutingComponents} from "./ranks.routing";
+import {SharedModule} from "../shared.module";
+import {CommonModule} from "@angular/common";
+import {RankService} from "../services/rank-service/rank.service";
+import {RankStore} from "../services/stores/rank.store";
+
+@NgModule({
+  declarations: ranksRoutingComponents,
+  imports: [CommonModule, SharedModule, rankRouterModule],
+  providers: [RankStore, RankService]
+})
+export class RanksModule {
+  static routes = rankRouterModule;
+}

static/src/app/ranks/ranks.routing.ts

@@ -1,7 +1,9 @@
-import {Routes} from "@angular/router";
+import {RouterModule, Routes} from "@angular/router";
 import {RankComponent} from "./ranks.component";
 import {RankListComponent} from "./rank-list/rank-list.component";
 import {EditRankComponent} from "./edit-rank/edit-rank.component";
+import {RankItemComponent} from "./rank-list/rank-item.component";
+import {ModuleWithProviders} from "@angular/core";
 
 
 export const ranksRoutes: Routes = [{
@@ -24,5 +26,7 @@ export const ranksRoutes: Routes = [{
     outlet: 'right'
   }];
 
-export const ranksRoutingComponents = [RankComponent, RankListComponent, EditRankComponent];
+export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes);
+
+export const ranksRoutingComponents = [RankComponent, RankItemComponent, RankListComponent, EditRankComponent];
 

static/src/app/request/award/req-award.component.html

@@ -47,7 +47,7 @@
   <div class="form-group">
     <label for="reason">Begründung</label>
     <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
-              id="reason" placeholder="Begründung eingeben..." rows="3" ></textarea>
+              id="reason" placeholder="Begründung eingeben..." rows="3"></textarea>
   </div>
 
   <button id="cancel"

static/src/app/request/confirm-promotion/confirm-promotion.component.ts

@@ -1,5 +1,4 @@
 import {Component} from "@angular/core";
-import {ActivatedRoute, Router} from "@angular/router";
 import {Promotion, Rank} from "../../models/model-interfaces";
 import {RankService} from "../../services/rank-service/rank.service";
 import {PromotionService} from "../../services/promotion-service/promotion.service";

static/src/app/request/request.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

static/src/app/request/request.component.ts

@@ -0,0 +1,11 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: 'request',
+  templateUrl: 'request.component.html',
+  styleUrls: ['request.component.css']
+})
+export class RequestComponent {
+  constructor() {
+  }
+}

static/src/app/request/request.module.ts

@@ -0,0 +1,21 @@
+import {CommonModule} from "@angular/common";
+import {SharedModule} from "../shared.module";
+import {requestRouterModule} from "./request.routing";
+import {NgModule} from "@angular/core";
+import {FilterRankPipe} from "../filter/filter.pipe";
+import {RequestComponent} from "./request.component";
+import {ConfirmAwardComponent} from "./confirm-award/confirm-award.component";
+import {ConfirmPromotionComponent} from "./confirm-promotion/confirm-promotion.component";
+import {RequestAwardComponent} from "./award/req-award.component";
+import {RequestPromotionComponent} from "./promotion/req-promotion.component";
+import {UserService} from "../services/user-service/user.service";
+import {UserStore} from "../services/stores/user.store";
+
+@NgModule({
+  declarations: [RequestComponent, RequestPromotionComponent, RequestAwardComponent, ConfirmPromotionComponent,
+    ConfirmAwardComponent, FilterRankPipe],
+  imports: [CommonModule, SharedModule, requestRouterModule]
+})
+export class RequestModule {
+  static routes = requestRouterModule;
+}

static/src/app/request/request.routing.ts

@@ -0,0 +1,38 @@
+import {RouterModule, Routes} from "@angular/router";
+import {ModuleWithProviders} from "@angular/core";
+import {ConfirmAwardComponent} from "./confirm-award/confirm-award.component";
+import {ConfirmPromotionComponent} from "./confirm-promotion/confirm-promotion.component";
+import {RequestAwardComponent} from "./award/req-award.component";
+import {RequestPromotionComponent} from "./promotion/req-promotion.component";
+
+import {RequestComponent} from "./request.component";
+import {RouteConfig} from "../app.config";
+import {LoginGuardHL, LoginGuardSQL} from "../login/login.guard";
+
+
+export const requestRoutes: Routes = [{
+  path: '', component: RequestComponent
+},
+  {
+    path: RouteConfig.requestAwardPath,
+    component: RequestAwardComponent,
+    canActivate: [LoginGuardSQL]
+  },
+  {
+    path: RouteConfig.requestPromotionPath,
+    component: RequestPromotionComponent,
+    canActivate: [LoginGuardSQL]
+  },
+  {
+    path: RouteConfig.confirmAwardPath,
+    component: ConfirmAwardComponent,
+    canActivate: [LoginGuardHL]
+  },
+  {
+    path: RouteConfig.confirmPromotionPath,
+    component: ConfirmPromotionComponent,
+    canActivate: [LoginGuardHL]
+  }
+];
+
+export const requestRouterModule: ModuleWithProviders = RouterModule.forChild(requestRoutes);

static/src/app/services/app-user-service/app-user.service.ts

@@ -1,8 +1,7 @@
 import {Injectable} from "@angular/core";
-import {AppUser, User} from "../../models/model-interfaces";
+import {AppUser} from "../../models/model-interfaces";
-import {URLSearchParams} from "@angular/http";
 import {Observable} from "rxjs/Observable";
-import {ADD, EDIT, LOAD, REMOVE} from "../stores/user.store";
+import {EDIT, LOAD, REMOVE} from "../stores/user.store";
 import {AppConfig} from "../../app.config";
 import {HttpClient} from "../http-client";
 import {AppUserStore} from "../stores/app-user.store";
@@ -30,12 +29,12 @@ export class AppUserService {
   }
 
   updateUser(user: AppUser) {
-      return this.http.patch(this.config.apiAppUserPath + user._id, user)
+    return this.http.patch(this.config.apiAppUserPath + user._id, user)
-        .map(res => res.json())
+      .map(res => res.json())
-        .do(savedUser => {
+      .do(savedUser => {
-          const action = {type: EDIT, data: savedUser};
+        const action = {type: EDIT, data: savedUser};
-          this.appUserStore.dispatch(action);
+        this.appUserStore.dispatch(action);
-        });
+      });
   }
 
   deleteUser(user) {

static/src/app/services/http-client.ts

@@ -1,7 +1,6 @@
 import {Injectable} from "@angular/core";
 import {Headers, Http, RequestMethod} from "@angular/http";
 import {Router} from "@angular/router";
-import {LoginService} from "./login-service/login-service";
 
 @Injectable()
 export class HttpClient {

static/src/app/services/login-service/login-service.ts

@@ -1,17 +1,15 @@
-import {Inject, Injectable, Optional} from "@angular/core";
+import {Injectable} from "@angular/core";
 import {Http, Response} from "@angular/http";
 import "rxjs/add/operator/map";
 
 import {AppConfig} from "../../app.config";
-import {AUTH_ENABLED} from "../../app.tokens";
 import {AppUser} from "../../models/model-interfaces";
 import {AwardingService} from "../awarding-service/awarding.service";
 import {PromotionService} from "../promotion-service/promotion.service";
 
 @Injectable()
 export class LoginService {
-  constructor(@Optional() @Inject(AUTH_ENABLED) public authEnabled = false,
+  constructor(private http: Http,
-              private http: Http,
               private config: AppConfig,
               private awardingService: AwardingService,
               private promotionService: PromotionService) {
@@ -47,15 +45,15 @@ export class LoginService {
   }
 
   isLoggedIn() {
-    return !this.authEnabled || localStorage.getItem('currentUser') != null;
+    return localStorage.getItem('currentUser') != null;
   }
 
-  hasPermission(level : number) {
+  hasPermission(level: number) {
     let currentUser = JSON.parse(localStorage.getItem('currentUser'));
     return this.isLoggedIn() && currentUser.permission >= level;
   }
 
-  getCurrentUser() :AppUser {
+  getCurrentUser(): AppUser {
     return JSON.parse(localStorage.getItem('currentUser'));
   }
 

static/src/app/services/squad-service/squad.service.ts

@@ -3,7 +3,7 @@ import {Squad} from "../../models/model-interfaces";
 import {RequestMethod, RequestOptions, URLSearchParams} from "@angular/http";
 import {Observable} from "rxjs/Observable";
 
-import {SquadStore, ADD, EDIT, LOAD, REMOVE} from "../stores/squad.store";
+import {ADD, EDIT, LOAD, REMOVE, SquadStore} from "../stores/squad.store";
 import {AppConfig} from "../../app.config";
 import {HttpClient} from "../http-client";
 
@@ -18,7 +18,7 @@ export class SquadService {
     this.squads$ = squadStore.items$;
   }
 
-  findSquads(query = '', fractionFilter='') {
+  findSquads(query = '', fractionFilter = '') {
     const searchParams = new URLSearchParams();
     searchParams.append('q', query);
     searchParams.append('fractFilter', fractionFilter);

static/src/app/services/stores/app-user.store.ts

@@ -1,5 +1,5 @@
 import {BehaviorSubject} from "rxjs/BehaviorSubject";
-import {AppUser, User} from "../../models/model-interfaces";
+import {AppUser} from "../../models/model-interfaces";
 
 export const LOAD = 'LOAD';
 export const ADD = 'ADD';

static/src/app/services/stores/generic-store.ts

@@ -7,6 +7,7 @@ export const REMOVE = 'REMOVE';
 
 
 type Id = string | number;
+
 interface Identifiable {
   id?: Id;
 }

static/src/app/services/war-service/war.service.ts

@@ -6,7 +6,7 @@ import {HttpClient} from "../http-client";
 @Injectable()
 export class WarService {
 
-  campaigns :Campaign[];
+  campaigns: Campaign[];
 
   constructor(private http: HttpClient,
               private config: AppConfig) {

static/src/app/shared.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ShowErrorComponent} from "./common/show-error/show-error.component";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+  declarations: [ShowErrorComponent],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent]
+})
+export class SharedModule {
+}

static/src/app/squads/edit-squad/edit-squad.component.ts

@@ -30,7 +30,7 @@ export class EditSquadComponent {
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private squadService : SquadService) {
+              private squadService: SquadService) {
   }
 
   ngOnInit() {

static/src/app/squads/squad-list/squad-item.component.html

@@ -11,7 +11,7 @@
     </div>
 
     <div class="col-xs-4">
-      <img src="{{imageSrc}}" height="50px"  class="squad-list-preview">
+      <img src="{{imageSrc}}" height="50px" class="squad-list-preview">
       <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>

static/src/app/squads/squad-list/squad-list.component.html

@@ -41,10 +41,10 @@
 
   <div>
     <pjm-squad-item *ngFor="let squad of squads$ | async"
-                   [squad]="squad"
+                    [squad]="squad"
-                   (squadDelete)="deleteSquad(squad)"
+                    (squadDelete)="deleteSquad(squad)"
-                   (squadSelected)="selectSquad($event)"
+                    (squadSelected)="selectSquad($event)"
-                   [selected]="squad._id == selectedSquadId">
+                    [selected]="squad._id == selectedSquadId">
     </pjm-squad-item>
   </div>
 

static/src/app/squads/squads.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from "@angular/common";
+import {SharedModule} from "../shared.module";
+import {squadRouterModule, squadsRoutingComponents} from "./squads.routing";
+import {SquadStore} from "../services/stores/squad.store";
+import {SquadService} from "../services/squad-service/squad.service";
+
+@NgModule({
+  declarations: squadsRoutingComponents,
+  imports: [CommonModule, SharedModule, squadRouterModule],
+  providers: [SquadStore, SquadService]
+})
+export class SquadsModule {
+  static routes = squadRouterModule;
+}

static/src/app/squads/squads.routing.ts

@@ -1,7 +1,9 @@
-import {Routes} from "@angular/router";
+import {RouterModule, Routes} from "@angular/router";
 import {SquadComponent} from "./squads.component";
 import {SquadListComponent} from "./squad-list/squad-list.component";
 import {EditSquadComponent} from "./edit-squad/edit-squad.component";
+import {ModuleWithProviders} from "@angular/core";
+import {SquadItemComponent} from "./squad-list/squad-item.component";
 
 export const squadsRoutes: Routes = [{
   path: '', component: SquadComponent,
@@ -23,5 +25,7 @@ export const squadsRoutes: Routes = [{
     outlet: 'right'
   }];
 
-export const squadsRoutingComponents = [SquadComponent, SquadListComponent, EditSquadComponent];
+export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes);
+
+export const squadsRoutingComponents = [SquadComponent, SquadItemComponent, SquadListComponent, EditSquadComponent];
 

static/src/app/statistic/stats.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from "@angular/common";
+import {SharedModule} from "../shared.module";
+import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
+import {WarService} from "../services/war-service/war.service";
+import {DataTableModule} from "angular2-datatable";
+import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts";
+import {AccordionModule, CarouselModule} from "ngx-bootstrap";
+
+@NgModule({
+  declarations: statsRoutingComponents,
+  imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule,
+    AccordionModule.forRoot(), CarouselModule.forRoot(), DataTableModule],
+  providers: [WarService]
+})
+export class StatsModule {
+  static routes = statsRouterModule;
+}

static/src/app/statistic/stats.routing.ts

@@ -1,10 +1,11 @@
-import {Routes} from "@angular/router";
+import {RouterModule, Routes} from "@angular/router";
 import {StatisticComponent} from "./stats.component";
 import {WarDetailComponent} from "./war-detail/war-detail.component";
 import {WarSubmitComponent} from "./war-submit/war-submit.component";
 import {WarListComponent} from "./war-list/war-list.component";
 import {StatisticOverviewComponent} from "./overview/stats-overview.component";
 import {WarItemComponent} from "./war-list/war-item.component";
+import {ModuleWithProviders} from "@angular/core";
 
 
 export const statsRoutes: Routes = [{
@@ -32,6 +33,8 @@ export const statsRoutes: Routes = [{
     outlet: 'right'
   }];
 
+export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
+
 export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, WarListComponent,
   WarSubmitComponent, WarDetailComponent, WarItemComponent];
 

static/src/app/statistic/war-detail/war-detail.component.ts

@@ -1,7 +1,6 @@
 import {Component} from "@angular/core";
-import {ActivatedRoute, Router} from "@angular/router";
+import {ActivatedRoute} from "@angular/router";
 import {WarService} from "../../services/war-service/war.service";
-import {LoginService} from "../../services/login-service/login-service";
 import {Player, War} from "../../models/model-interfaces";
 
 

static/src/app/statistic/war-list/war-item.component.html

@@ -6,11 +6,12 @@
         <a>{{war.title}}</a>
       </span>
       <br>
-      <small >vom {{war.date | date: 'dd.MM.yyyy'}}</small>
+      <small>vom {{war.date | date: 'dd.MM.yyyy'}}</small>
     </div>
 
     <div class="col-xs-3">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash" *ngIf="loginService.hasPermission(3)"></span>
+      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"
+            *ngIf="loginService.hasPermission(3)"></span>
     </div>
 
   </div>

static/src/app/style/list-entry.css

@@ -40,7 +40,7 @@ span {
 }
 
 .trash {
-  float:right;
+  float: right;
   padding-top: 18px;
   font-size: 17px;
 }

static/src/app/users/user-list/user-item.component.html

@@ -12,7 +12,8 @@
     </div>
 
     <div class="col-sm-4">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash pull-right"></span>
+      <span (click)="delete(); $event.stopPropagation()" title="Löschen"
+            class="glyphicon glyphicon-trash trash pull-right"></span>
       <span (click)="award(); $event.stopPropagation()" title="Auszeichnungen" class="icon-award pull-right"></span>
     </div>
   </div>

static/src/app/users/users.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {routes, usersRoutingComponents} from './users.routing';
+import {UserStore} from "../services/stores/user.store";
+import {UserService} from "../services/user-service/user.service";
+import {CommonModule} from "@angular/common";
+import {SharedModule} from "../shared.module";
+
+@NgModule({
+  declarations: usersRoutingComponents,
+  imports: [CommonModule, SharedModule, routes],
+})
+export class UsersModule {
+  static routes = routes;
+}

static/src/app/users/users.routing.ts

@@ -1,8 +1,10 @@
-import {Routes} from "@angular/router";
+import {RouterModule, Routes} from "@angular/router";
 import {UsersComponent} from "./users.component";
 import {EditUserComponent} from "./edit-user/edit-user.component";
 import {UserListComponent} from "./user-list/user-list.component";
 import {AwardUserComponent} from "./award-user/award-user.component";
+import {ModuleWithProviders} from "@angular/core";
+import {UserItemComponent} from "./user-list/user-item.component";
 
 export const usersRoutes: Routes = [{
   path: '', component: UsersComponent,
@@ -30,4 +32,6 @@ export const usersRoutes: Routes = [{
   }
 ];
 
-export const usersRoutingComponents = [UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent];
+export const routes: ModuleWithProviders = RouterModule.forChild(usersRoutes);
+
+export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent];

static/src/environments/environment.e2e.ts

@@ -1,4 +1,3 @@
-
 export const environment = {
   production: false,
   e2eMode: true

static/src/index.html

@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root>Loading...</app-root>
+<app-root>Loading...</app-root>
 </body>
 </html>

static/src/main.ts

@@ -1,8 +1,8 @@
-import { enableProdMode } from '@angular/core';
+import {enableProdMode} from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import {AppModule} from './app/app.module';
-import { environment } from './environments/environment';
+import {environment} from './environments/environment';
 
 
 import 'rxjs/add/observable/of';

static/src/polyfills.ts

@@ -13,11 +13,9 @@
  *
  * 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';
@@ -32,29 +30,19 @@
 // import 'core-js/es6/regexp';
 // import 'core-js/es6/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`.
-
 /** IE10 and IE11 requires the following to support `@angular/animation`. */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
-
-
 /** ALL Firefox browsers require the following to support `@angular/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.
+import 'zone.js/dist/zone'; // Included with Angular CLI.
-
 
 
 /***************************************************************************************************

static/src/styles.css

@@ -1,5 +1,5 @@
 body {
-    padding-left: 20px;
+  padding-left: 20px;
   padding-top: 50px;
 
 }
@@ -47,6 +47,7 @@ form {
   padding-right: 10px;
 
 }
+
 #right {
   overflow: hidden;
   padding-left: 4%;

static/src/test.ts

@@ -9,18 +9,16 @@ import 'zone.js/dist/fake-async-test';
 
 import 'rxjs/Rx';
 
-import { getTestBed } from '@angular/core/testing';
+import {getTestBed} from '@angular/core/testing';
-import {
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
 declare var require: any;
 
 // Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
+__karma__.loaded = function () {
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(

static/tslint.json

@@ -12,7 +12,10 @@
     "curly": true,
     "eofline": true,
     "forin": true,
-    "import-blacklist": [true, "rxjs"],
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
     "import-spacing": true,
     "indent": [
       true,
@@ -97,9 +100,18 @@
       "check-separator",
       "check-type"
     ],
-
+    "directive-selector": [
-    "directive-selector": [true, "attribute", "app", "camelCase"],
+      true,
-    "component-selector": [true, "element", "app", "kebab-case"],
+      "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,