Migrate notification component to portal #562

bkd-mba-fbi · Dec 21, 2023 · dfab5bb · dfab5bb
1 parent de25157
commit dfab5bb
Show file tree

Hide file tree

Showing 23 changed files with 7 additions and 717 deletions.
diff --git a/README.md b/README.md
@@ -23,12 +23,11 @@ paste the import of the `settings.js` and the CSS files from
 </head>
 ```
 
-In addition, you have to copy and paste the root-tags and all `<script>`
+In addition, you have to copy and paste the app tag and all `<script>`
 tags from `index.html`'s `<body>`:
 
 ```
 <body>
-  <erz-notifications></erz-notifications>
   <erz-app></erz-app>
   <script type="text/javascript" src="runtime.xyz.js"></script>
   ...

diff --git a/angular.json b/angular.json
@@ -51,7 +51,7 @@
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
-            "allowedCommonJsDependencies": ["xss", "codelyzer"]
+            "allowedCommonJsDependencies": ["codelyzer"]
           },
           "configurations": {
             "production": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,6 @@
     "@angular/common": "^16.2.10",
     "@angular/compiler": "^16.2.10",
     "@angular/core": "^16.2.10",
-    "@angular/elements": "^16.2.10",
     "@angular/forms": "^16.2.10",
     "@angular/localize": "^16.2.10",
     "@angular/platform-browser": "^16.2.10",
@@ -58,7 +57,6 @@
     "ngx-infinite-scroll": "^16.0.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
-    "xss": "^1.0.14",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
-import { Router } from "@angular/router";
 import { EMPTY } from "rxjs";
 import { catchError } from "rxjs/operators";
 import { SETTINGS, Settings } from "./settings";
@@ -9,20 +8,19 @@ import { NAVIGATOR } from "./shared/tokens/dom-apis";
 import { decode } from "./shared/utils/decode";
 
 @Component({
+  selector: "erz-app",
   template:
     '<erz-toast aria-live="polite" aria-atomic="true"></erz-toast><router-outlet></router-outlet>',
   styleUrls: ["./app.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   constructor(
-    private router: Router,
     i18n: I18nService,
     private toastService: ToastService,
     @Inject(SETTINGS) private settings: Settings,
     @Inject(NAVIGATOR) private navigator: Navigator,
   ) {
-    this.router.initialNavigation();
     i18n.initialize();
     this.checkSettings();
   }

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,15 +2,7 @@ import { registerLocaleData } from "@angular/common";
 import { HttpClient, HttpClientModule } from "@angular/common/http";
 import localeDECH from "@angular/common/locales/de-CH";
 import localeFRCH from "@angular/common/locales/fr-CH";
-import {
-  ApplicationRef,
-  DoBootstrap,
-  ErrorHandler,
-  Injector,
-  LOCALE_ID,
-  NgModule,
-} from "@angular/core";
-import { createCustomElement } from "@angular/elements";
+import { ErrorHandler, LOCALE_ID, NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@@ -22,7 +14,6 @@ import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
 import { GlobalErrorHandler } from "./global-error-handler";
 import { HomeComponent } from "./home.component";
-import { MyNotificationsShowComponent } from "./my-notifications/components/my-notifications-show/my-notifications-show.component";
 import { SETTINGS, Settings } from "./settings";
 import { I18nService } from "./shared/services/i18n.service";
 import { SharedModule } from "./shared/shared.module";
@@ -44,12 +35,7 @@ registerLocaleData(localeDECH);
 registerLocaleData(localeFRCH);
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    UnauthenticatedComponent,
-    MyNotificationsShowComponent,
-  ],
+  declarations: [AppComponent, HomeComponent, UnauthenticatedComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -75,22 +61,6 @@ registerLocaleData(localeFRCH);
       deps: [I18nService],
     },
   ],
-  bootstrap: [],
+  bootstrap: [AppComponent],
 })
-export class AppModule implements DoBootstrap {
-  constructor(private injector: Injector) {
-    const notificationsElement = createCustomElement(
-      MyNotificationsShowComponent,
-      { injector: this.injector },
-    );
-    customElements.define("erz-notifications", notificationsElement);
-
-    const appElement = createCustomElement(AppComponent, {
-      injector: this.injector,
-    });
-    customElements.define("erz-app", appElement);
-  }
-
-  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-  ngDoBootstrap(_appRef: ApplicationRef): void {}
-}
+export class AppModule {}
diff --git a/...pp/my-notifications/components/my-notifications-show/my-notifications-show.component.html b/...pp/my-notifications/components/my-notifications-show/my-notifications-show.component.html
diff --git a/...pp/my-notifications/components/my-notifications-show/my-notifications-show.component.scss b/...pp/my-notifications/components/my-notifications-show/my-notifications-show.component.scss