[YUNIKORN-2606] Modular sidebar with remote components (#198)

Implemented Module Federation for the Applications Drawer component Closes: #198 Signed-off-by: Yu-Lin Chen <[email protected]>
apache · Sep 24, 2024 · 21ebe5d · 21ebe5d
1 parent 57c100a
commit 21ebe5d
Show file tree

Hide file tree

Showing 23 changed files with 1,012 additions and 304 deletions.
diff --git a/Makefile b/Makefile
@@ -195,9 +195,9 @@ OS := $(shell uname -s | tr '[:upper:]' '[:lower:]')
 license-check:
 	@echo "checking license headers:"
 ifeq (darwin,$(OS))
-	$(shell mkdir -p "$(OUTPUT)" && find -E . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path ./pnpm-lock.yaml -regex ".*\.(go|sh|md|conf|yaml|yml|html|mod)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
+	$(shell mkdir -p "$(OUTPUT)" && find -E . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path ./pnpm-lock.yaml  -not \( -path ./dist -prune \) -regex ".*\.(go|sh|md|conf|yaml|yml|html|mod|js)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
 else
-	$(shell mkdir -p "$(OUTPUT)" && find . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path ./pnpm-lock.yaml -regex ".*\.\(go\|sh\|md\|conf\|yaml\|yml\|html\|mod\)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
+	$(shell mkdir -p "$(OUTPUT)" && find . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path ./pnpm-lock.yaml -not \( -path ./node_modules -prune \) -regex ".*\.\(go\|sh\|md\|conf\|yaml\|yml\|html\|mod\|js\)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
 endif
 	@if [ -s "$(OUTPUT)/license-check.txt" ]; then \
 		echo "following files are missing license header:" ; \

diff --git a/angular.json b/angular.json
@@ -22,21 +22,31 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "ngx-build-plus:browser",
           "options": {
             "outputPath": "dist/yunikorn-web",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets", {"glob": "LICENSE", "input": "./", "output": "./"}],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "LICENSE",
+                "input": "./",
+                "output": "./"
+              }
+            ],
             "styles": [
               "src/styles.scss",
               "node_modules/@fontsource/roboto/index.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "extraWebpackConfig": "webpack.config.js",
+            "commonChunk": false
           },
           "configurations": {
             "production": {
@@ -58,7 +68,8 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "extraWebpackConfig": "webpack.prod.config.js"
             },
             "development": {
               "buildOptimizer": false,
@@ -72,21 +83,28 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "ngx-build-plus:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "yunikorn-web:build:production"
+              "browserTarget": "yunikorn-web:build:production",
+              "extraWebpackConfig": "webpack.prod.config.js"
             },
             "development": {
               "browserTarget": "yunikorn-web:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 4200,
+            "publicHost": "http://localhost:4200",
+            "extraWebpackConfig": "webpack.config.js"
+          }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "ngx-build-plus:extract-i18n",
           "options": {
-            "browserTarget": "yunikorn-web:build"
+            "browserTarget": "yunikorn-web:build",
+            "extraWebpackConfig": "webpack.config.js"
           }
         },
         "test": {
@@ -97,12 +115,17 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           }
         }
       }
     }
   }
-}
+}
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "build:prod": "ng build --configuration production",
     "start:srv": "json-server --watch json-db.json",
     "test:coverage": "ng test --code-coverage --karma-config=./karma.conf.ci.js",
-    "prettify": "prettier --config ./.prettierrc --write 'src/**/*.{js,ts,json,css,scss,md,html}'"
+    "prettify": "prettier --config ./.prettierrc --write 'src/**/*.{js,ts,json,css,scss,md,html}'",
+    "run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
   },
   "private": true,
   "husky": {
@@ -28,6 +29,7 @@
     ]
   },
   "dependencies": {
+    "@angular-architects/module-federation": "^16.0.4",
     "@angular/animations": "^16.2.10",
     "@angular/cdk": "^16.2.9",
     "@angular/common": "^16.2.10",
@@ -81,6 +83,7 @@
     "karma-super-dots-reporter": "^0.2.0",
     "lint-staged": "^15.0.2",
     "ng-mocks": "^14.11.0",
+    "ngx-build-plus": "^16.0.0",
     "prettier": "^3.0.3",
     "puppeteer": "^22.2.0",
     "typescript": "5.1.6"
@@ -90,4 +93,4 @@
     "pnpm": "9"
   },
   "packageManager": "pnpm@9"
-}
+}