feat: register as a custom element

Co-authored-by: Louis Greiner <[email protected]>

Author: emersion

package-lock.json

@@ -26,6 +26,7 @@
     "@angular/common": "^17.0.5",
     "@angular/compiler": "^17.0.5",
     "@angular/core": "^17.0.5",
+    "@angular/elements": "^17.1.0",
     "@angular/forms": "^17.0.5",
     "@angular/localize": "^17.0.5",
     "@angular/platform-browser": "^17.0.5",

package.json

@@ -1,6 +1,7 @@
-import {NgModule} from "@angular/core";
+import {NgModule, Injector, ApplicationRef, DoBootstrap} from "@angular/core";
 import {NgxEditorModule} from "ngx-editor";
 import {BrowserModule} from "@angular/platform-browser";
+import {createCustomElement} from "@angular/elements";
 import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
 import {OAuthModule} from "angular-oauth2-oidc";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@@ -230,10 +231,20 @@ import {ActionMenuComponent} from "./view/action-menu/action-menu/action-menu.co
     SbbBreadcrumbModule,
     SbbAutocompleteModule,
   ],
-  bootstrap: [AppComponent],
+  bootstrap: environment.customElement ? [] : [AppComponent],
   providers: [
     ... environment.backendUrl ? [{provide: BASE_PATH, useValue: environment.backendUrl}] : [],
     {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true},
   ],
 })
-export class AppModule {}
+
+export class AppModule implements DoBootstrap {
+  constructor(private injector: Injector) {}
+
+  ngDoBootstrap() {
+    if (environment.customElement) {
+      const element = createCustomElement(AppComponent, {injector: this.injector});
+      customElements.define("sbb-root", element);
+    }
+  }
+}

src/app/app.module.ts

@@ -6,4 +6,5 @@ export interface Environment {
   backendUrl?: string;
   authConfig?: AuthConfig;
   disableBackend: boolean;
+  customElement: boolean;
 }

src/environments/environment.model.ts

@@ -4,4 +4,5 @@ export const environment: Environment = {
   production: true,
   label: "standalone",
   disableBackend: true,
+  customElement: true,
 };

src/environments/environment.standalone.ts

@@ -24,6 +24,7 @@ export const environment: Environment = {
   backendUrl: "http://localhost:8080",
   authConfig,
   disableBackend: false,
+  customElement: false,
 };
 
 /*