Merge pull request #287 from bkd-mba-fbi/feature/improve-webcomponent…

…-handling

extract root-module to a web component, make notifications more indep…

src/app/app.component.ts

@@ -1,10 +1,4 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  Inject,
-  HostBinding,
-  Injector,
-} from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { catchError } from 'rxjs/operators';
 import { EMPTY } from 'rxjs';
@@ -13,32 +7,24 @@ import { SETTINGS, Settings } from './settings';
 import { I18nService } from './shared/services/i18n.service';
 import { decode } from './shared/utils/decode';
 import { NAVIGATOR } from './shared/tokens/dom-apis';
-import { MyNotificationsService } from './my-notifications/services/my-notifications.service';
-import { createCustomElement } from '@angular/elements';
-import { MyNotificationsShowComponent } from './my-notifications/components/my-notifications-show/my-notifications-show.component';
+import { Router } from '@angular/router';
 
 @Component({
-  selector: 'erz-app',
   template: '<router-outlet></router-outlet>',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   constructor(
+    private router: Router,
     i18n: I18nService,
     private toastrService: ToastrService,
     @Inject(SETTINGS) private settings: Settings,
-    @Inject(NAVIGATOR) private navigator: Navigator,
-    injector: Injector,
-    private notificationService: MyNotificationsService
+    @Inject(NAVIGATOR) private navigator: Navigator
   ) {
+    this.router.initialNavigation();
     i18n.initialize();
     this.checkSettings();
-    const notificationsElement = createCustomElement(
-      MyNotificationsShowComponent,
-      { injector }
-    );
-    customElements.define('erz-notifications', notificationsElement);
   }
 
   private checkSettings(): void {

src/app/app.module.ts

@@ -2,9 +2,18 @@ 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 { ErrorHandler, LOCALE_ID, NgModule } from '@angular/core';
+import {
+  ApplicationRef,
+  DoBootstrap,
+  ErrorHandler,
+  Injector,
+  LOCALE_ID,
+  NgModule,
+} from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { ToastrModule } from 'ngx-toastr';
@@ -44,6 +53,7 @@ registerLocaleData(localeFRCH);
   imports: [
     BrowserModule,
     AppRoutingModule,
+    RouterModule,
     HttpClientModule,
     BrowserAnimationsModule,
     TranslateModule.forRoot({
@@ -68,7 +78,22 @@ registerLocaleData(localeFRCH);
     },
     MyNotificationsService,
   ],
-  bootstrap: [AppComponent],
-  entryComponents: [MyNotificationsShowComponent],
+  bootstrap: [],
+  entryComponents: [AppComponent, MyNotificationsShowComponent],
 })
-export class AppModule {}
+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);
+  }
+
+  ngDoBootstrap(appRef: ApplicationRef): void {}
+}

src/app/my-notifications/components/my-notifications-show/my-notifications-show.component.ts

@@ -17,6 +17,7 @@ import { NotificationDataPropertyValueType } from 'src/app/shared/models/user-se
 import { MyNotificationsService } from '../../services/my-notifications.service';
 import { SETTINGS, Settings } from 'src/app/settings';
 import { HttpErrorResponse } from '@angular/common/http';
+import { I18nService } from 'src/app/shared/services/i18n.service';
 
 @Component({
   templateUrl: './my-notifications-show.component.html',
@@ -52,9 +53,12 @@ export class MyNotificationsShowComponent implements OnDestroy {
   };
 
   constructor(
+    i18n: I18nService,
     @Inject(SETTINGS) private settings: Settings,
     public notificationService: MyNotificationsService
   ) {
+    i18n.initialize();
+
     // stream of notifications
     this.notifications$ = this.refetch$.pipe(
       switchMap(() =>
@@ -91,7 +95,6 @@ export class MyNotificationsShowComponent implements OnDestroy {
     // refetch notifications
     this.trigger$.pipe(takeUntil(this.destroyed$)).subscribe(() => {
       this.refetch$.next(null);
-      console.log('trigger');
     });
 
     this.deleteNotificationId$