GUACAMOLE-1085: Migrate frontend to angular

.gitignore

@@ -1,2 +1,8 @@
 *~
 target/
+
+# IntelliJ IDEA
+.idea
+
+# MacOS
+.DS_Store

doc/guacamole-frontend-extension-example/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

doc/guacamole-frontend-extension-example/README.md

@@ -0,0 +1,47 @@
+# Frontend Extension Example
+
+Adds global css styles, new routes (/guacamole/guacamole-angular-example and /guacamole/guacamole-angular-example/about)
+and button below the "Logout" user menu.
+
+[//]: # (TODO: Update for native federation)
+## Setup
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) 
+version 16.1.1 using the following steps:
+
+```bash
+# Create a new minimal Angular project
+ng new guacamole-frontend-extension-example \
+--minimal \
+--prefix guac \
+--routing \
+--skip-tests \
+--skip-install \
+--standalone \
+--view-encapsulation None
+
+# ... manually set the version of @angular dependencies to "16.1.1" in the package.json
+
+cd guacamole-frontend-extension-example
+
+npm install
+
+# Add support for module federation
+ng add @angular-architects/module-federation --project guacamole-frontend-extension-example --type remote --port 4202
+
+# Add the frontend extension library
+npm install ..\..\guacamole\src\main\guacamole-frontend\dist\guacamole-frontend-ext-lib
+
+```
+
+Add `"src/app/extension.config.ts"` to `tsconfig.app.json` `files` array.
+
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4202/`. The application will automatically reload if you change any of the source files.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+To package the artifacts for guacamole run `node ./package-extension.js`.

doc/guacamole-frontend-extension-example/angular.json

@@ -0,0 +1,142 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+		"guacamole-frontend-extension-example": {
+			"projectType": "application",
+			"schematics": {
+				"@schematics/angular:component": {
+					"inlineTemplate": true,
+					"inlineStyle": true,
+					"skipTests": true,
+					"standalone": true
+				},
+				"@schematics/angular:class": {
+					"skipTests": true
+				},
+				"@schematics/angular:directive": {
+					"skipTests": true,
+					"standalone": true
+				},
+				"@schematics/angular:guard": {
+					"skipTests": true
+				},
+				"@schematics/angular:interceptor": {
+					"skipTests": true
+				},
+				"@schematics/angular:pipe": {
+					"skipTests": true,
+					"standalone": true
+				},
+				"@schematics/angular:resolver": {
+					"skipTests": true
+				},
+				"@schematics/angular:service": {
+					"skipTests": true
+				}
+			},
+			"root": "",
+			"sourceRoot": "src",
+			"prefix": "guac",
+			"architect": {
+				"build": {
+					"builder": "@angular-architects/native-federation:build",
+					"options": {},
+					"configurations": {
+						"production": {
+							"target": "guacamole-frontend-extension-example:esbuild:production"
+						},
+						"development": {
+							"target": "guacamole-frontend-extension-example:esbuild:development",
+							"dev": true
+						}
+					},
+					"defaultConfiguration": "production"
+				},
+				"serve": {
+					"builder": "@angular-architects/native-federation:build",
+					"options": {
+						"target": "guacamole-frontend-extension-example:serve-original:development",
+						"rebuildDelay": 0,
+						"dev": true,
+						"port": 0
+					}
+				},
+				"extract-i18n": {
+					"builder": "ngx-build-plus:extract-i18n",
+					"options": {
+						"browserTarget": "guacamole-frontend-extension-example:build",
+						"extraWebpackConfig": "webpack.config.js"
+					}
+				},
+				"esbuild": {
+					"builder": "@angular-devkit/build-angular:application",
+					"options": {
+						"outputPath": {
+							"base": "dist/guacamole-frontend-extension-example",
+							"browser": ""
+						},
+						"index": "src/index.html",
+						"polyfills": [
+							"zone.js",
+							"es-module-shims"
+						],
+						"tsConfig": "tsconfig.app.json",
+						"assets": [
+							{
+								"glob": "*.html",
+								"input": "src/html",
+								"output": "html"
+							}
+						],
+						"styles": [
+							"src/styles.css"
+						],
+						"scripts": [],
+						"browser": "src/main.ts"
+					},
+					"configurations": {
+						"production": {
+							"budgets": [
+								{
+									"type": "initial",
+									"maximumWarning": "500kb",
+									"maximumError": "1mb"
+								},
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "2kb",
+									"maximumError": "4kb"
+								}
+							],
+							"outputHashing": "all"
+						},
+						"development": {
+							"optimization": false,
+							"extractLicenses": false,
+							"sourceMap": true,
+							"namedChunks": true
+						}
+					},
+					"defaultConfiguration": "production"
+				},
+				"serve-original": {
+					"builder": "@angular/build:dev-server",
+					"configurations": {
+						"production": {
+							"buildTarget": "guacamole-frontend-extension-example:esbuild:production"
+						},
+						"development": {
+							"buildTarget": "guacamole-frontend-extension-example:esbuild:development"
+						}
+					},
+					"defaultConfiguration": "development",
+					"options": {
+						"port": 4202
+					}
+				}
+			}
+		}
+	}
+}

doc/guacamole-frontend-extension-example/federation.config.js

@@ -0,0 +1,27 @@
+const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
+
+module.exports = withNativeFederation({
+
+  name: 'guacamole-frontend-extension-example',
+
+  exposes: {
+    'bootsrapExtension': './src/app/extension.config.ts',
+    'AboutExtensionButtonComponent': './src/app/components/about-extension-button.component.ts'
+  },
+
+  shared: {
+    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+  },
+
+  // Packages that should not be shared or are not needed at runtime
+  skip: [
+    'rxjs/ajax',
+    'rxjs/fetch',
+    'rxjs/testing',
+    'rxjs/webSocket'
+  ]
+
+  // Please read our FAQ about sharing libs:
+  // https://shorturl.at/jmzH0
+
+});