#186 - add new build system, get it working

angular-client/.dockerignore

@@ -7,3 +7,7 @@ src/environments/environment.ts
 Dockerfile
 .dockerignore
 README.md
+/.angular
+/dist
+/node_modules
+

angular-client/Dockerfile

@@ -30,7 +30,7 @@ FROM nginx:latest as Production
 WORKDIR /usr/local/app
 
 # copy dist
-COPY --from=Build /usr/src/app/dist/angular-client /usr/share/nginx/html
+COPY --from=Build /usr/src/app/dist/angular-client/browser /usr/share/nginx/html
 
 RUN rm /etc/nginx/conf.d/default.conf
 

angular-client/angular.json

@@ -11,11 +11,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/angular-client",
+            "outputPath": {
+              "base": "dist/angular-client"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
@@ -24,7 +25,10 @@
               "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
               "node_modules/primeng/resources/primeng.min.css"
             ],
-            "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"]
+            "scripts": [
+              "node_modules/apexcharts/dist/apexcharts.min.js"
+            ],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -43,9 +47,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

angular-client/src/components/double-line-graph/double-line-graph.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import * as ApexCharts from 'apexcharts';
+import ApexCharts from 'apexcharts';
 import {
   ApexAxisChartSeries,
   ApexXAxis,
@@ -11,7 +11,7 @@ import {
   ApexTooltip,
   ApexFill,
   ApexStroke,
-  ApexLegend
+  ApexLegend,
 } from 'ng-apexcharts';
 import { DialogService } from 'primeng/dynamicdialog';
 import { GraphDialog } from '../graph-dialog/graph-dialog.component';
@@ -36,7 +36,7 @@ type ChartOptions = {
   selector: 'double-line-graph',
   templateUrl: './double-line-graph.component.html',
   styleUrls: ['./double-line-graph.component.css'],
-  providers: [DialogService]
+  providers: [DialogService],
 })
 export class DoubleLineGraphComponent implements OnInit {
   @Input() data1!: GraphData[];
@@ -63,21 +63,21 @@ export class DoubleLineGraphComponent implements OnInit {
       data: {
         data: this.data1,
         color: this.color1,
-        title: this.title1
-      }
+        title: this.title1,
+      },
     });
   };
 
   updateChart = () => {
     this.series = [
       {
         name: this.title1,
-        data: Array.from(this.data1)
+        data: Array.from(this.data1),
       },
       {
         name: this.title2,
-        data: Array.from(this.data2)
-      }
+        data: Array.from(this.data2),
+      },
     ];
     // temp fix, for now just basing change on data1 length...
     // even though probably should check data1 also
@@ -91,8 +91,8 @@ export class DoubleLineGraphComponent implements OnInit {
         ...this.options,
         xaxis: {
           ...this.options.xaxis,
-          range: this.timeRangeMs
-        }
+          range: this.timeRangeMs,
+        },
       });
     }
 
@@ -108,12 +108,12 @@ export class DoubleLineGraphComponent implements OnInit {
     this.series = [
       {
         name: this.title1,
-        data: this.data1
+        data: this.data1,
       },
       {
         name: this.title2,
-        data: this.data2
-      }
+        data: this.data2,
+      },
     ];
 
     this.options = {
@@ -123,89 +123,98 @@ export class DoubleLineGraphComponent implements OnInit {
         type: 'line',
         height: '100%',
         zoom: {
-          autoScaleYaxis: true
+          autoScaleYaxis: true,
         },
         animations: {
           enabled: true,
           easing: 'linear',
           dynamicAnimation: {
-            speed: 1000
-          }
+            speed: 1000,
+          },
         },
         toolbar: {
-          show: false
-        }
+          show: false,
+        },
         // background: '#5A5A5A'
       },
       colors: [this.color1, this.color2], // Set series colors here
       dataLabels: {
-        enabled: false
+        enabled: false,
       },
       stroke: {
         curve: 'straight',
-        width: 2
+        width: 2,
       },
       markers: {
-        size: 0
+        size: 0,
       },
       xaxis: {
         type: 'category',
         tickAmount: 2,
         labels: {
           show: true,
           style: {
-            colors: '#FFFFFF'
+            colors: '#FFFFFF',
           },
           formatter: (value) => {
-            return '' + new Date(value).getHours() + ':' + new Date(value).getMinutes() + ':' + new Date(value).getSeconds();
-          }
+            return (
+              '' +
+              new Date(value).getHours() +
+              ':' +
+              new Date(value).getMinutes() +
+              ':' +
+              new Date(value).getSeconds()
+            );
+          },
         },
         axisBorder: {
-          show: false
+          show: false,
         },
         axisTicks: {
-          show: false
-        }
+          show: false,
+        },
       },
       yaxis: {
         tickAmount: 2,
         labels: {
           style: {
-            colors: '#FFFFFF'
-          }
-        }
+            colors: '#FFFFFF',
+          },
+        },
       },
       tooltip: {
         theme: 'dark',
         x: {
           // format by hours and minutes and seconds
-          format: 'M/d/yy, h:mm:ss'
-        }
+          format: 'M/d/yy, h:mm:ss',
+        },
       },
       fill: {
         type: 'linear',
         gradient: {
           shadeIntensity: 1,
           opacityFrom: 1,
           opacityTo: 1,
-          stops: [0, 100, 0, 100]
-        }
+          stops: [0, 100, 0, 100],
+        },
       },
       grid: {
-        show: false
+        show: false,
       },
       legend: {
         labels: {
-          colors: '#fffff4' // Set legend label color to black
-        }
-      }
+          colors: '#fffff4', // Set legend label color to black
+        },
+      },
     };
 
     // Delay rendering to ensure the container is available
     setTimeout(() => {
       const chartContainer = document.getElementById(this.graphContainerId);
       if (!chartContainer) {
-        console.log('Container with id ' + this.graphContainerId + ' not found');
+        console.log(
+          'Container with id ' + this.graphContainerId + ' not found',
+        );
         return;
       }