Ship as a custom element

Author: emersion

package-lock.json

@@ -24,6 +24,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} 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,17 @@ import {ActionMenuComponent} from "./view/action-menu/action-menu/action-menu.co
     SbbBreadcrumbModule,
     SbbAutocompleteModule,
   ],
-  bootstrap: [AppComponent],
+  //bootstrap: [AppComponent],
   providers: [
     {provide: BASE_PATH, useValue: environment.backendUrl},
     {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true},
   ],
 })
-export class AppModule {}
+export class AppModule {
+  constructor(private injector: Injector) {}
+
+  ngDoBootstrap() {
+    const element = createCustomElement(AppComponent, { injector: this.injector });
+    customElements.define("sbb-root", element);
+  }
+}