first working version of dynamic load

package-lock.json

@@ -5,19 +5,35 @@
   "requires": true,
   "dependencies": {
     "@angular/common": {
-      "version": "5.2.11",
+      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.11.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-8.2.1.tgz",
-      "integrity": "sha512-LniJjGAeftUJDJh+2+LEjltcGen08C/VMxQ/eUYmesytKy1sN+MWzh3GbpKfEWtWmyUsYTG9lAAJNo3L3jPwsw==",
+      "integrity": "sha512-CVewkkFswELDQ1qx2G7m2pj0IqDbSIY6O6wZtNvYCDrLXRVDwSXcQsjNP1pSWuD37dHT/nifimchfLiVuisPyg==",
       "requires": {
-        "tslib": "^1.7.1"
+        "tslib": "^1.9.0"
       }
     },
     "@angular/core": {
-      "version": "5.2.11",
+      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.11.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.2.1.tgz",
-      "integrity": "sha512-h2vpvXNAdOqKzbVaZcHnHGMT5A8uDnizk6FgGq6SPyw9s3d+/VxZ9LJaPjUk3g2lICA7og1tUel+2YfF971MlQ==",
+      "integrity": "sha512-BMyLo/iOZ/eRR25CggWT3cexzfOnoey13NPeqYRtsO5dQUeVQPT1RH/bIWZ6yIPFSlBm6zUi/QqE1rjDautK5A==",
       "requires": {
-        "tslib": "^1.7.1"
+        "tslib": "^1.9.0"
+      }
+    },
+    "@angular/platform-browser": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.2.1.tgz",
+      "integrity": "sha512-mzaXsHNTN3lBu3+H02GrRRu8Zo5R4GQiAb+MKdqiQMJ8hjnAmKJTYIVEbEnk/dJYbMZWvhxRGLmRIcntpYF38g==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@angular/router": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-8.2.1.tgz",
+      "integrity": "sha512-CIhwBmRoVaZmfvGjuUomiyWn7OdHqzKbHq0poI3jlNJZCmzuBicYFctjCeqG6L2BIN0eVuJUJNeQ0OrcicP52w==",
+      "requires": {
+        "tslib": "^1.9.0"
       }
     },
     "@babel/code-frame": {
@@ -526,13 +542,6 @@
       "integrity": "sha512-bCtL5v9zdbQW86yexOlXWTEGvLNqWxMFyi7gQA7Gcthbezr2cPSOb8SkESVKA937QD5cIwOFLDFt0MQoXOEr9Q==",
       "requires": {
         "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "12.6.9",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.9.tgz",
-          "integrity": "sha512-+YB9FtyxXGyD54p8rXwWaN1EWEyar5L58GlGWgtH2I9rGmLGBQcw63+0jw+ujqVavNuO47S1ByAjm9zdHMnskw=="
-        }
       }
     },
     "@types/is-valid-path": {
@@ -587,9 +596,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "11.13.18",
+      "version": "11.13.19",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.18.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.19.tgz",
-      "integrity": "sha512-sMHdXLccscaxI+Hlzz58yLQue3lQyXP+6aQniDRi5oju3n0123kcjhicVGF20WF7cHiwJ2vxMbXc4skOclosoA=="
+      "integrity": "sha512-tLRDU1hmcWamtgRT2iVRdraAQVGFQGgtcqracSo9XyMN1VeZLSVGb8RJJxVqab7UGbijoUijGPVFMjmqzyZIUw=="
     },
     "@types/q": {
       "version": "1.5.2",
@@ -3849,23 +3858,23 @@
       }
     },
     "frontblock-generic": {
-      "version": "0.6.1",
+      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.12.0.tgz",
-      "integrity": "sha512-BY5iSZ0g0/99Eno3f7+njMGxLl+ssN7JC7iEHp0v/UVYUprbFl9+0Ni6F+q/xY0wZucTdUpnyo/TBPIVACiLpQ==",
+      "integrity": "sha512-yVPnj5AMZb2Baxs2ta/BfPdbN6PbG8RoovBcIARPuE83aknDV61xTMo7TKwxQiJ06tnVR13Ot5UiyjNkfXHObA==",
       "requires": {
-        "@types/node": "^12.0.0",
+        "@types/node": "^12.7.1",
         "bsock": "^0.1.9",
         "http": "0.0.0",
-        "key-file-storage": "^2.2.1",
+        "key-file-storage": "^2.2.4",
         "log4js": "^4.2.0",
         "minimist": "^1.2.0",
         "uuid": "^3.3.2"
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.6.9",
+          "version": "12.7.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.9.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.1.tgz",
-          "integrity": "sha512-+YB9FtyxXGyD54p8rXwWaN1EWEyar5L58GlGWgtH2I9rGmLGBQcw63+0jw+ujqVavNuO47S1ByAjm9zdHMnskw=="
+          "integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw=="
         }
       }
     },
@@ -6148,9 +6157,9 @@
       }
     },
     "key-file-storage": {
-      "version": "2.2.1",
+      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/key-file-storage/-/key-file-storage-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/key-file-storage/-/key-file-storage-2.2.4.tgz",
-      "integrity": "sha512-wTeuxRiPeXud8oxOC64bKPnLEyhMcu+fK7YTYC7rc3tRuO4GZOuxaxZzYgy5aHYzbInSgejtjNAPMqsArbtOHA==",
+      "integrity": "sha512-4l4UKHYMTdV5rwgQCGBCtR+QuMMgyA06ur2R3W2yPDVVdwRrBGsrz9cYZIiPh7ITKWoWOw8WwunEEUHSVk6Tzg==",
       "requires": {
         "@types/fs-extra": "^8.0.0",
         "@types/is-valid-path": "^0.1.0",
@@ -11507,6 +11516,11 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
       "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
+    "zone.js": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.9.1.tgz",
+      "integrity": "sha512-GkPiJL8jifSrKReKaTZ5jkhrMEgXbXYC+IPo1iquBjayRa0q86w3Dipjn8b415jpitMExe9lV8iTsv8tk3DGag=="
     }
   }
 }

package.json

@@ -1,5 +1,6 @@
 {
   "name": "frontblock-admin",
+  "description": "Dynamic configurator for frontblock",
   "version": "1.0.0",
   "scripts": {
     "tsc": "tsc",
@@ -7,7 +8,7 @@
     "build": "npm run clean; npm run build-backend; npm run build-frontend",
     "build-backend": "tsc; webpack --display-error-details --config src/backend/webpack.prod.js --progress --colors; cp -r lib/PluginManager/* .",
     "build-frontend": "npm run build-dashboard; npm run build-widget",
-    "build-dashboard": "cd src/frontend/dashboard; npm i; npm run build; cp -r dist/* ../../../static",
+    "build-dashboard": "cd src/frontend/dashboard; npm run build; cp -r dist/dashboard/* ../../../static",
     "build-widget": "rollup -c src/frontend/widget/rollup.config.js; mkdir -p plugins/PluginManager; cp FrontendPlugin.js plugins/PluginManager",
     "clean": "rm -rf lib static plugins kfs dist widget .rpt2_cache *.js *.ts; rm -rf src/frontend/dashboard/dist",
     "update-frontblock": "rm -rf node_modules/frontblock*; npm install"
@@ -19,9 +20,10 @@
   "author": "frontblock.me",
   "license": "ISC",
   "dependencies": {
-    "@angular/common": "^5.2.11",
+    "@angular/common": "^8.2.1",
-    "@angular/core": "^5.2.2",
+    "@angular/core": "^8.2.1",
-    "@types/node": "^11.13.10",
+    "@angular/platform-browser": "^8.2.1",
+    "@angular/router": "^8.2.1",
     "@uirouter/angularjs": "^1.0.5",
     "adm-zip": "^0.4.13",
     "angular": "^1.7.8",
@@ -31,10 +33,10 @@
     "bsock": "^0.1.9",
     "easy-unzip": "^1.1.0",
     "express": "^4.16.4",
-    "frontblock-generic": "latest",
+    "frontblock-generic": "^0.12.0",
     "hdkey": "^1.1.1",
     "http": "0.0.0",
-    "key-file-storage": "^2.2.1",
+    "key-file-storage": "^2.2.4",
     "log4js": "^4.4.0",
     "memfs": "^2.15.5",
     "minimist": "^1.2.0",
@@ -45,18 +47,16 @@
     "socket.io": "^2.2.0",
     "stream-buffers": "^3.0.2",
     "unzip": "^0.1.11",
-    "uuid": "^3.3.2"
+    "uuid": "^3.3.2",
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "rollup-plugin-node-resolve": "^3.0.2",
+    "@types/angular": "^1.6.27",
-    "rollup-plugin-typescript": "^0.8.1",
-    "rollup-plugin-typescript2": "^0.10.0",
     "@types/express": "^4.17.0",
-    "@types/node": "^11.13.18",
+    "@types/jest": "^24.0.15",
+    "@types/node": "^11.13.19",
     "@types/semver": "^6.0.1",
     "@types/webpack-env": "^1.14.0",
-    "@types/angular": "^1.6.27",
-    "@types/jest": "^24.0.15",
     "autoprefixer": "^9.4.7",
     "clean-webpack-plugin": "^1.0.1",
     "css-loader": "^2.1.0",
@@ -71,6 +71,9 @@
     "node-sass": "^4.5.3",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.18.2",
+    "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-typescript": "^0.8.1",
+    "rollup-plugin-typescript2": "^0.10.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.3.0",

src/frontend/dashboard.bak/src/app/dashboard/dashboard/dashboard.component.ts

@@ -37,7 +37,9 @@ export class DashboardComponent implements AfterViewInit {
 
   @ViewChild('content', { read: ViewContainerRef }) content: ViewContainerRef;
 
-  constructor(private compiler: Compiler, private dashboardService: DashboardService,
+  constructor(
+    private compiler: Compiler, 
+    private dashboardService: DashboardService,
     private injector: Injector) { }
 
   ngAfterViewInit() {

src/frontend/dashboard/angular.json

@@ -28,9 +28,15 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/@clr/icons/clr-icons.min.css",
+              "node_modules/@clr/ui/clr-ui.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/systemjs/dist/system.js",
+              "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
+              "node_modules/@clr/icons/clr-icons.min.js" 
+            ]
           },
           "configurations": {
             "production": {
@@ -45,7 +51,7 @@
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
-              "aot": true,
+              "aot": false,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,

src/frontend/dashboard/package-lock.json

@@ -1343,6 +1343,14 @@
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
       "dev": true
     },
+    "@types/fs-extra": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.0.0.tgz",
+      "integrity": "sha512-bCtL5v9zdbQW86yexOlXWTEGvLNqWxMFyi7gQA7Gcthbezr2cPSOb8SkESVKA937QD5cIwOFLDFt0MQoXOEr9Q==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/glob": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
@@ -1354,6 +1362,11 @@
         "@types/node": "*"
       }
     },
+    "@types/is-valid-path": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@types/is-valid-path/-/is-valid-path-0.1.0.tgz",
+      "integrity": "sha512-2ontWtpN8O2nf5S7EjDDJ0DwrRa2t7wmS3Wmo322yWYG6yFBYC1QCaLhz4Iz+mzJy8Kf4zP5yVyEd1ANPDmOFQ=="
+    },
     "@types/jasmine": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.4.0.tgz",
@@ -1378,8 +1391,7 @@
     "@types/node": {
       "version": "12.7.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.1.tgz",
-      "integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw==",
+      "integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw=="
-      "dev": true
     },
     "@types/q": {
       "version": "0.0.32",
@@ -1399,6 +1411,12 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
+    "@types/systemjs": {
+      "version": "0.20.6",
+      "resolved": "https://registry.npmjs.org/@types/systemjs/-/systemjs-0.20.6.tgz",
+      "integrity": "sha512-p3yv9sBBJXi3noUG216BpUI7VtVBUAvBIfZNTiDROUY31YBfsFHM4DreS7XMekN8IjtX0ysvCnm6r3WnirnNeA==",
+      "dev": true
+    },
     "@types/webpack-sources": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.5.tgz",
@@ -1594,6 +1612,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@webcomponents/custom-elements": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.0.0.tgz",
+      "integrity": "sha1-sXJuEgdLVWqjG5Pzb/agOkNSWcQ="
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -1919,7 +1942,6 @@
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
       "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-      "dev": true,
       "requires": {
         "lodash": "^4.17.14"
       }
@@ -2130,8 +2152,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
-      "dev": true
     },
     "base": {
       "version": "0.11.2",
@@ -2319,7 +2340,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -2431,6 +2451,19 @@
         "https-proxy-agent": "^2.2.1"
       }
     },
+    "bsert": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/bsert/-/bsert-0.0.10.tgz",
+      "integrity": "sha512-NHNwlac+WPy4t2LoNh8pXk8uaIGH3NSaIUbTTRXGpE2WEbq0te/tDykYHkFK57YKLPjv/aGHmbqvnGeVWDz57Q=="
+    },
+    "bsock": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/bsock/-/bsock-0.1.9.tgz",
+      "integrity": "sha512-/l9Kg/c5o+n/0AqreMxh2jpzDMl1ikl4gUxT7RFNe3A3YRIyZkiREhwcjmqxiymJSRI/Qhew357xGn1SLw/xEw==",
+      "requires": {
+        "bsert": "~0.0.10"
+      }
+    },
     "buffer": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -2921,8 +2954,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
-      "dev": true
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -3208,8 +3240,7 @@
     "date-format": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
-      "integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==",
+      "integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA=="
-      "dev": true
     },
     "date-now": {
       "version": "0.1.4",
@@ -4161,8 +4192,7 @@
     "flatted": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz",
-      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
+      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg=="
-      "dev": true
     },
     "flush-write-stream": {
       "version": "1.1.1",
@@ -4263,11 +4293,24 @@
         "readable-stream": "^2.0.0"
       }
     },
+    "frontblock-generic": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.12.0.tgz",
+      "integrity": "sha512-yVPnj5AMZb2Baxs2ta/BfPdbN6PbG8RoovBcIARPuE83aknDV61xTMo7TKwxQiJ06tnVR13Ot5UiyjNkfXHObA==",
+      "requires": {
+        "@types/node": "^12.7.1",
+        "bsock": "^0.1.9",
+        "http": "0.0.0",
+        "key-file-storage": "^2.2.4",
+        "log4js": "^4.2.0",
+        "minimist": "^1.2.0",
+        "uuid": "^3.3.2"
+      }
+    },
     "fs-extra": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -4298,8 +4341,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
-      "dev": true
     },
     "fsevents": {
       "version": "2.0.7",
@@ -4354,7 +4396,6 @@
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
       "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -4416,8 +4457,7 @@
     "graceful-fs": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.1.tgz",
-      "integrity": "sha512-b9usnbDGnD928gJB3LrCmxoibr3VE4U2SMo5PBuBnokWyDADTqDPXg4YpwKF1trpH+UbGp7QLicO3+aWEy0+mw==",
+      "integrity": "sha512-b9usnbDGnD928gJB3LrCmxoibr3VE4U2SMo5PBuBnokWyDADTqDPXg4YpwKF1trpH+UbGp7QLicO3+aWEy0+mw=="
-      "dev": true
     },
     "handle-thing": {
       "version": "2.0.0",
@@ -4624,6 +4664,11 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "http": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.0.tgz",
+      "integrity": "sha1-huYybSnF0Dnen6xYSkVon5KfT3I="
+    },
     "http-cache-semantics": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
@@ -4869,7 +4914,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -4878,8 +4922,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-      "dev": true
     },
     "ini": {
       "version": "1.3.5",
@@ -5102,6 +5145,29 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-invalid-path": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-invalid-path/-/is-invalid-path-0.1.0.tgz",
+      "integrity": "sha1-MHqFWzzxqTi0TqcNLGEQYFNxTzQ=",
+      "requires": {
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA="
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -5183,6 +5249,14 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-valid-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-valid-path/-/is-valid-path-0.1.1.tgz",
+      "integrity": "sha1-EQ+f90w39mPh7HkV60UfLbk6yd8=",
+      "requires": {
+        "is-invalid-path": "^0.1.0"
+      }
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -5547,7 +5621,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -5674,6 +5747,30 @@
         "source-map-support": "^0.5.5"
       }
     },
+    "key-file-storage": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/key-file-storage/-/key-file-storage-2.2.4.tgz",
+      "integrity": "sha512-4l4UKHYMTdV5rwgQCGBCtR+QuMMgyA06ur2R3W2yPDVVdwRrBGsrz9cYZIiPh7ITKWoWOw8WwunEEUHSVk6Tzg==",
+      "requires": {
+        "@types/fs-extra": "^8.0.0",
+        "@types/is-valid-path": "^0.1.0",
+        "fs-extra": "^8.1.0",
+        "is-valid-path": "^0.1.1",
+        "recur-fs": "^2.2.4"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        }
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -5781,8 +5878,7 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-      "dev": true
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
@@ -5800,7 +5896,6 @@
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/log4js/-/log4js-4.5.1.tgz",
       "integrity": "sha512-EEEgFcE9bLgaYUKuozyFfytQM2wDHtXn4tAN41pkaxpNjAykv11GVdeI4tHtmPWW4Xrgh9R/2d7XYghDVjbKKw==",
-      "dev": true,
       "requires": {
         "date-format": "^2.0.0",
         "debug": "^4.1.1",
@@ -5813,7 +5908,6 @@
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
           "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -5821,8 +5915,7 @@
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-          "dev": true
         }
       }
     },
@@ -6177,7 +6270,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -6185,8 +6277,7 @@
     "minimist": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
-      "dev": true
     },
     "minipass": {
       "version": "2.3.5",
@@ -6268,7 +6359,6 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -6276,8 +6366,7 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
-          "dev": true
         }
       }
     },
@@ -6682,7 +6771,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -7009,8 +7097,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
-      "dev": true
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -7678,6 +7765,34 @@
         "picomatch": "^2.0.4"
       }
     },
+    "recur-fs": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/recur-fs/-/recur-fs-2.2.4.tgz",
+      "integrity": "sha1-TcRRXqvcEZw9kUAkrFNTwC00oxg=",
+      "requires": {
+        "minimatch": "3.0.3",
+        "mkdirp": "0.5.1",
+        "rimraf": "2.5.4"
+      },
+      "dependencies": {
+        "minimatch": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
+          "integrity": "sha1-Kk5AkLlrLbBqnX3wEFWmKnfJt3Q=",
+          "requires": {
+            "brace-expansion": "^1.0.0"
+          }
+        },
+        "rimraf": {
+          "version": "2.5.4",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz",
+          "integrity": "sha1-loAAk8vxoMhr2VtGJUZ1NcKd+gQ=",
+          "requires": {
+            "glob": "^7.0.5"
+          }
+        }
+      }
+    },
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -7868,8 +7983,7 @@
     "rfdc": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.1.4.tgz",
-      "integrity": "sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug==",
+      "integrity": "sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug=="
-      "dev": true
     },
     "rimraf": {
       "version": "2.6.3",
@@ -8871,7 +8985,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-1.0.6.tgz",
       "integrity": "sha512-3QC47Mhv3/aZNFpDDVO44qQb9gwB9QggMEE0sQmkTAwBVYdBRWISdsywlkfm5II1Q5y/pmrHflti/IgmIzdDBg==",
-      "dev": true,
       "requires": {
         "async": "^2.6.2",
         "date-format": "^2.0.0",
@@ -8884,7 +8997,6 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -8892,8 +9004,7 @@
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-          "dev": true
         }
       }
     },
@@ -9035,6 +9146,11 @@
       "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
       "dev": true
     },
+    "systemjs": {
+      "version": "0.21.6",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.21.6.tgz",
+      "integrity": "sha512-R+5S9eV9vcQgWOoS4D87joZ4xkFJHb19ZsyKY07D1+VBDE9bwYcU+KXE0r5XlDA8mFoJGyuWDbfrNoh90JsA8g=="
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -9428,8 +9544,7 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-      "dev": true
     },
     "unpipe": {
       "version": "1.0.0",
@@ -9601,8 +9716,7 @@
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
-      "dev": true
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -11334,8 +11448,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
-      "dev": true
     },
     "ws": {
       "version": "3.3.3",

src/frontend/dashboard/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --aot=true --proxy-config proxy.conf.json",
+    "start": "ng serve --aot=false --optimization=false --proxy-config proxy.conf.json",
-    "build": "ng build --prod --aot=false",
+    "build": "ng build --prod --aot=false --optimization=false --build-optimizer=false",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -22,7 +22,11 @@
     "@clr/angular": "^2.1.1",
     "@clr/icons": "^2.1.1",
     "@clr/ui": "^2.1.1",
+    "@webcomponents/custom-elements": "^1.0.0",
+    "frontblock-generic": "latest",
+    "key-file-storage": "^2.2.4",
     "rxjs": "~6.5.2",
+    "systemjs": "^0.21.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.10.1"
   },
@@ -33,7 +37,8 @@
     "@angular/language-service": "~8.2.1",
     "@types/jasmine": "~3.4.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~12.7.1",
+    "@types/node": "^12.7.1",
+    "@types/systemjs": "^0.20.6",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

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

@@ -1,11 +1,20 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule, Route } from '@angular/router';
+import { HomeComponent } from './home/home.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [{
+  path: "",
+  component: HomeComponent
+}];
+
+export function getRoutes(){
+  return routes
+}
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/frontend/dashboard/src/app/app.component.html

@@ -6,16 +6,5 @@
       </a>
     </div>
   </header>
-
+  <app-dynamic-loader></app-dynamic-loader>
-  <div class="content-ontainer">
-    <div class="content-area">
-      <app-main></app-main>
-    </div>
-  </div>
-
-  <div class="content-container">
-    <div class="content-area">
-      <app-sidebar></app-sidebar>
-    </div>
-  </div>
 </div>

src/frontend/dashboard/src/app/app.module.ts

@@ -1,8 +1,9 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, ANALYZE_FOR_ENTRY_COMPONENTS, ModuleWithProviders } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { AppRoutingModule } from './app-routing.module';
+import { AppRoutingModule, getRoutes } from './app-routing.module';
 import { ClarityModule } from '@clr/angular';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
 import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
@@ -10,23 +11,31 @@ import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
 import { AppComponent } from './app.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { MainComponent } from './main/main.component';
+import { DynamicLoaderComponent } from './dynamic-loader/dynamic-loader.component';
+import { HomeComponent } from './home/home.component';
 
 export function createCompiler(fn: CompilerFactory): Compiler {
   return fn.createCompiler();
 }
 
+const entryComps = []
+
 @NgModule({
   declarations: [
     AppComponent,
     SidebarComponent,
-    MainComponent
+    MainComponent,
+    DynamicLoaderComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     ClarityModule,
     HttpClientModule,
     AppRoutingModule
   ],
+  entryComponents: entryComps,
   providers: [
     {
       provide: COMPILER_OPTIONS,
@@ -46,4 +55,5 @@ export function createCompiler(fn: CompilerFactory): Compiler {
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule{
+}

src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.html

@@ -0,0 +1,4 @@
+<div class="content-container">
+    <app-sidebar></app-sidebar>
+    <app-main></app-main>
+</div>

src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.spec.ts

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

src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts

@@ -0,0 +1,80 @@
+/**
+ * Set existing vendor modules into SystemJS registry.
+ * This way SystemJS won't make HTTP requests to fetch imported modules
+ * needed by the dynamicaly loaded Widgets.
+ */
+import { System } from 'systemjs';
+declare const SystemJS: System;
+declare const fb
+
+import * as angularRouter from '@angular/router';
+import * as angularCore from '@angular/core';
+import * as angularCommon from '@angular/common';
+import * as angularCommonHttp from '@angular/common/http';
+import * as angularForms from '@angular/forms';
+import * as angularAnimations from '@angular/animations';
+import * as angularPlatformBrowser from '@angular/platform-browser';
+import * as angularPlatformBrowserDynamic from '@angular/platform-browser-dynamic';
+
+SystemJS.set('@angular/router', SystemJS.newModule(angularRouter));
+SystemJS.set('@angular/core', SystemJS.newModule(angularCore));
+SystemJS.set('@angular/common', SystemJS.newModule(angularCommon));
+SystemJS.set('@angular/common/http', SystemJS.newModule(angularCommonHttp));
+SystemJS.set('@angular/forms', SystemJS.newModule(angularForms));
+SystemJS.set('@angular/animations', SystemJS.newModule(angularAnimations));
+SystemJS.set('@angular/platform-browser', SystemJS.newModule(angularPlatformBrowser));
+SystemJS.set('@angular/platform-browser-dynamic', SystemJS.newModule(angularPlatformBrowserDynamic));
+
+SystemJS.config({ meta: { '*': { authorization: true } } });
+/** --------- */
+
+
+import { AfterViewInit, Component, ViewContainerRef, ViewChild } from '@angular/core';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { MainComponent } from '../main/main.component';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'app-dynamic-loader',
+  templateUrl: './dynamic-loader.component.html',
+  styleUrls: ['./dynamic-loader.component.scss']
+})
+export class DynamicLoaderComponent implements AfterViewInit {
+
+  @ViewChild(SidebarComponent, {static: false})
+  sidebar: SidebarComponent
+  @ViewChild(MainComponent, {read: ViewContainerRef, static: false})
+  maincontent: ViewContainerRef
+
+  constructor(
+    private router: Router,
+  ) { }
+
+  ngAfterViewInit() {
+    this.loadWidgets()
+  }
+
+  private async loadWidgets(){
+    while(!fb.PluginManager){
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    }
+    const pluginNames = await fb.PluginManager.getLoadedPluginNames()
+    pluginNames.forEach(element => this.installWidget(element));
+  }
+
+  private async installWidget(pluginName:string){
+    const module: any = await SystemJS.import("plugins/"+pluginName+".js");
+    const plugin = new module['PluginModule']()
+    const entry = plugin.getSidebarEntry()
+    entry.route = 'page/' + entry.route
+    this.sidebar.entries.unshift(entry)
+
+    const rc = this.router.config
+    rc.unshift({
+      path: "page",
+      loadChildren: async () => module['PluginModule']
+    })
+    this.router.resetConfig(rc)
+  }
+}

src/frontend/dashboard/src/app/error-display/a-nested.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'exclamations',
+  template: `
+  <span style="color: blue">!!!</span>
+  `
+})
+export class ANestedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/dashboard/src/app/error-display/error-display.component.html

@@ -0,0 +1 @@
+<p>Oops that didn't work!</p>

src/frontend/dashboard/src/app/error-display/error-display.component.spec.ts

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

src/frontend/dashboard/src/app/error-display/error-display.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-error-display',
+  templateUrl: './error-display.component.html',
+  styleUrls: ['./error-display.component.scss'],
+})
+export class ErrorDisplayComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/frontend/dashboard/src/app/error-display/module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ErrorDisplayComponent } from './error-display.component';
+import { ANestedComponent } from './a-nested.component';
+import { RouterModule } from '@angular/router';
+
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild([{path: "helloWorld", component: ErrorDisplayComponent}])],
+  exports: [RouterModule],
+  declarations: [
+    ErrorDisplayComponent,
+    ANestedComponent
+  ],
+  entryComponents: [ErrorDisplayComponent],
+  providers: [{
+    provide: 'provider',
+    useValue: ErrorDisplayComponent
+  }],
+  
+})
+export class PluginModule { }

src/frontend/dashboard/src/app/home/home.component.html

@@ -0,0 +1 @@
+<p>home works!</p>

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

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

src/frontend/dashboard/src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/frontend/dashboard/src/app/main/main.component.html

@@ -1 +1,4 @@
-<p>main works!</p>
+
+<div class="content-area">
+    <router-outlet></router-outlet>
+</div>

src/frontend/dashboard/src/app/main/main.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewContainerRef, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-main',
@@ -7,9 +7,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MainComponent implements OnInit {
 
+  @ViewChild('content', { read: ViewContainerRef, static: false }) 
+  content: ViewContainerRef;
+
   constructor() { }
 
   ngOnInit() {
   }
-
 }

src/frontend/dashboard/src/app/sidebar/sidebar.component.html

@@ -1 +1,6 @@
-<p>sidebar works!</p>
+<clr-vertical-nav  [clrVerticalNavCollapsible]="true">
+    <a *ngFor="let entry of entries" clrVerticalNavLink routerLinkActive="active" [routerLink]="entry.route">
+        <clr-icon [attr.shape]="entry.icon" clrVerticalNavIcon></clr-icon>
+        {{entry.text}}
+    </a>
+</clr-vertical-nav>

src/frontend/dashboard/src/app/sidebar/sidebar.component.ts

@@ -7,9 +7,27 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {
 
+  entries:{text:string, icon:string, route:string}[] = [
+    {
+      text: "we",
+      icon: "step-forward-2",
+      route: "/test"
+    },{
+      text: "are",
+      icon: "cloud",
+      route: "/test"
+    },{
+      text: "static",
+      icon: "success-standard",
+      route: "/test"
+    },
+
+  ]
+
   constructor() { }
 
   ngOnInit() {
   }
 
+
 }

src/frontend/dashboard/src/index.html

@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="FrontblockLib.js"></script>
   <meta charset="utf-8">
   <title>Dashboard</title>
   <base href="/">

src/frontend/widget/rollup.config.js

@@ -22,6 +22,7 @@ export default {
     external: [
         'plugins-core',
         '@angular/core',
-        '@angular/common'
+        '@angular/common',
+        '@angular/router'
     ]
 }

src/frontend/widget/widget/module.ts

@@ -2,9 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PluginComponent } from './component';
 import { ANestedComponent } from './a-nested.component';
+import { RouterModule } from '@angular/router';
+import { FrontendPlugin, SidebarEntry } from 'frontblock-generic/Plugin';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule.forChild([{path: "pluginmanager", component: PluginComponent}])],
+  exports: [RouterModule],
   declarations: [
     PluginComponent,
     ANestedComponent
@@ -15,4 +18,9 @@ import { ANestedComponent } from './a-nested.component';
     useValue: PluginComponent
   }]
 })
-export class PluginModule { }
+export class PluginModule implements FrontendPlugin{
+  getSidebarEntry(): SidebarEntry {
+    return {icon: 'check', text: 'Plugin manager', route: 'pluginmanager'}
+  }
+  
+}