diff --git a/apps/client/project.json b/apps/client/project.json
index adb63d5c1..0d3571cdf 100644
--- a/apps/client/project.json
+++ b/apps/client/project.json
@@ -61,30 +61,30 @@
   },
   "targets": {
     "build": {
-      "executor": "@nx/angular:webpack-browser",
+      "executor": "@nx/angular:browser-esbuild",
       "options": {
-        "deleteOutputPath": false,
-        "localize": true,
-        "outputPath": "dist/apps/client",
         "index": "apps/client/src/index.html",
         "main": "apps/client/src/main.ts",
-        "polyfills": "apps/client/src/polyfills.ts",
+        "outputPath": "dist/apps/client",
         "tsConfig": "apps/client/tsconfig.app.json",
+        "buildOptimizer": false,
+        "deleteOutputPath": false,
+        "extractLicenses": false,
+        "localize": true,
+        "namedChunks": true,
+        "ngswConfigPath": "apps/client/ngsw-config.json",
+        "optimization": false,
+        "polyfills": "apps/client/src/polyfills.ts",
+        "scripts": ["node_modules/marked/marked.min.js"],
+        "serviceWorker": true,
+        "sourceMap": true,
         "styles": [
           "apps/client/src/assets/fonts/inter.css",
           "apps/client/src/styles/theme.scss",
           "apps/client/src/styles.scss",
           "node_modules/open-color/open-color.css"
         ],
-        "scripts": ["node_modules/marked/marked.min.js"],
-        "vendorChunk": true,
-        "extractLicenses": false,
-        "buildOptimizer": false,
-        "sourceMap": true,
-        "optimization": false,
-        "namedChunks": true,
-        "serviceWorker": true,
-        "ngswConfigPath": "apps/client/ngsw-config.json"
+        "vendorChunk": true
       },
       "configurations": {
         "development-ca": {
@@ -136,19 +136,6 @@
           "localize": ["zh"]
         },
         "production": {
-          "fileReplacements": [
-            {
-              "replace": "apps/client/src/environments/environment.ts",
-              "with": "apps/client/src/environments/environment.prod.ts"
-            }
-          ],
-          "optimization": true,
-          "outputHashing": "all",
-          "sourceMap": false,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "vendorChunk": false,
-          "buildOptimizer": true,
           "budgets": [
             {
               "type": "initial",
@@ -160,7 +147,20 @@
               "maximumWarning": "6kb",
               "maximumError": "10kb"
             }
-          ]
+          ],
+          "buildOptimizer": true,
+          "extractLicenses": true,
+          "fileReplacements": [
+            {
+              "replace": "apps/client/src/environments/environment.ts",
+              "with": "apps/client/src/environments/environment.prod.ts"
+            }
+          ],
+          "namedChunks": false,
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "vendorChunk": false
         }
       },
       "outputs": ["{options.outputPath}"],
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
index 3f062a374..2d8a03ac0 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
@@ -31,6 +31,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { isUUID } from 'class-validator';
 import Color from 'color';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import OpenColor from 'open-color';
 
 import { translate } from '../i18n';
 
@@ -47,7 +48,7 @@ const {
   teal,
   violet,
   yellow
-} = require('open-color');
+} = OpenColor;
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
index 4e06d49cc..6ae958b83 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -33,10 +33,11 @@ import { isUUID } from 'class-validator';
 import { differenceInDays, max } from 'date-fns';
 import { orderBy } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import OpenColor from 'open-color';
 
 import { GetColorParams } from './interfaces/interfaces';
 
-const { gray, green, red } = require('open-color');
+const { gray, green, red } = OpenColor;
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,