packages

package-lock.json

@@ -12526,6 +12526,11 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

package.json

@@ -14,7 +14,9 @@
     "eslint": "^6.8.0",
     "font-awesome": "^4.7.0",
     "jquery": "3.4.1",
-    "popper.js": "^1.16.1"
+    "popper.js": "^1.16.1",
+    "tslib": "^1.11.1",
+    "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
     "@types/bootstrap": "^4.3.2",

src/app.html

 <template>
     <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
         <div class="container">
-            <a class="navbar-brand" href="#">SportMap</a>
+            <a class="navbar-brand" route-href="route: home; params.bind: {}">SportMap</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                 aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
@@ -9,6 +9,11 @@
 
             <div class="collapse navbar-collapse" id="navbar">
                 <ul class="navbar-nav mr-auto">
+                    
+                    <li repeat.for="nav of router.navigation" class="nav-item ${nav.isActive ? 'active' : ''}">
+                        <a class="nav-link" href.bind="nav.href">${nav.title}</a>
+                    </li>
+<!--
                     <li class="nav-item active">
                         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                     </li>
@@ -27,6 +32,7 @@
                             <a class="dropdown-item" href="#">Something else here</a>
                         </div>
                     </li>
+-->                    
                 </ul>
             </div>
         </div>
@@ -34,7 +40,6 @@
 
     <div class="container">
         <main role="main">
-            ${envstr}
             <router-view></router-view>
         </main>
     </div>

src/app.ts

 import { PLATFORM } from 'aurelia-pal';
-import { autoinject } from 'aurelia-framework';
-import { RouterConfiguration, Router } from 'aurelia-router';
-import * as environment from '../config/environment.json';
+import { autoinject, LogManager, View } from 'aurelia-framework';
+import { RouterConfiguration, Router, RouteConfig, NavigationInstruction } from 'aurelia-router';
+import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
+
+export const log = LogManager.getLogger('app.App');
 
 @autoinject
 export class App {
     router?: Router;
+    private subscriptions: Subscription[] = [];
+
+    // ================================= view lifecycle ===============================
+    created(owningView: View, myView: View): void {
+        log.debug("created");
+
+    }
 
-    envstr = JSON.stringify(environment);
+    bind(bindingContext: Record<string, any>, overrideContext: Record<string, any>): void {
+        log.debug("bind");
+    }
+
+    attached(): void {
+        log.debug("attached");
+    }
+
+    detached(): void {
+        log.debug("detached");
+        this.subscriptions.forEach(subscription => {
+            subscription.dispose();
+        });
+        this.subscriptions = [];
+    }
+
+    unbind(): void {
+        log.debug("unbind");
+    }
+
+    // ================================= Route lifecycle  ===============================
+    canActivate(params: any, routeConfig: RouteConfig, navigationInstruction: NavigationInstruction): void {
+        log.debug("canActivate");
+    }
+
+    activate(params: any, routeConfig: RouteConfig, navigationInstruction: NavigationInstruction): void {
+        log.debug("activate");
+    }
+
+    canDeactivate(): void {
+        log.debug("canDeactivate");
+    }
+
+    deactivate(): void {
+        log.debug("deactivate");
+    }
 
     configureRouter(config: RouterConfiguration, router: Router): void {
         this.router = router;
@@ -18,4 +62,13 @@ export class App {
 
         config.mapUnknownRoutes('views/home/index');
     }
+
+    // ================================= View  ===============================
+
+    // ================================= Event  ===============================
+
+    // ================================= Helpers  ===============================
+
+
+
 }

src/main.ts

@@ -2,6 +2,9 @@ import {Aurelia, LogManager} from 'aurelia-framework';
 import * as environment from '../config/environment.json';
 import {PLATFORM} from 'aurelia-pal';
 import { ConsoleAppender } from 'aurelia-logging-console';
+import { ILogLevel } from 'types/ILogLevel';
+import { queryStringValue, validateLogLevel } from 'utils/utils-general';
+import 'whatwg-fetch';
 
 import 'jquery';
 import 'popper.js';
@@ -9,8 +12,6 @@ import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'font-awesome/css/font-awesome.min.css';
 import '../static/site.css';
-import { ILogLevel } from 'types/ILogLevel';
-import { queryStringValue, validateLogLevel } from 'utils/utils-general';
 
 let logLevel = environment.logLevel;
 const queryLogLevel = queryStringValue('loglevel');
@@ -44,8 +45,6 @@ export function configure(aurelia: Aurelia): void {
     .standardConfiguration()
     .feature(PLATFORM.moduleName('resources/index'));
 
-  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');
-
   if (environment.testing) {
     aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
   }

tsconfig.json

 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "module": "esnext",
-    "skipLibCheck": true,
-    "typeRoots": [
-      "./node_modules/@types"
+    "compileOnSave": false,
+    "compilerOptions": {
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "downlevelIteration": true,
+        "importHelpers": true,
+        "allowSyntheticDefaultImports": true,
+        "module": "esnext",
+        "skipLibCheck": true,
+        "typeRoots": [
+            "./node_modules/@types"
+        ],
+        "removeComments": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "sourceMap": true,
+        "target": "es5",
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "moduleResolution": "node",
+        "baseUrl": "src",
+        "resolveJsonModule": true,
+        "allowJs": true
+    },
+    "include": [
+        "./src/**/*.ts",
+        "./test/**/*.ts",
+        "./types/**/*.d.ts"
     ],
-    "removeComments": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "sourceMap": true,
-    "target": "es5",
-    "lib": [
-      "es2015",
-      "dom"
-    ],
-    "moduleResolution": "node",
-    "baseUrl": "src",
-    "resolveJsonModule": true,
-    "allowJs": true
-  },
-  "include": [
-    "./src/**/*.ts",
-    "./test/**/*.ts",
-    "./types/**/*.d.ts"
-  ],
-  "atom": {
-    "rewriteTsconfig": false
-  }
-}
\ No newline at end of file
+    "atom": {
+        "rewriteTsconfig": false
+    }
+}