refactor: move app-initializers into their respective modules

Author: sleidig

src/app/app-initializers.ts

@@ -17,15 +17,8 @@
 
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import {
-  APP_INITIALIZER,
-  ErrorHandler,
-  Inject,
-  LOCALE_ID,
-  NgModule,
-} from "@angular/core";
+import { LOCALE_ID, NgModule } from "@angular/core";
 import { HttpClientModule } from "@angular/common/http";
-import * as Sentry from "@sentry/angular";
 
 import { AppComponent } from "./app.component";
 import { allRoutes } from "./app.routing";
@@ -40,8 +33,6 @@ import {
 import { environment } from "../environments/environment";
 import { AnalyticsService } from "./core/analytics/analytics.service";
 import { ConfigurableEnumModule } from "./core/basic-datatypes/configurable-enum/configurable-enum.module";
-import { MatPaginatorIntl } from "@angular/material/paginator";
-import { TranslatableMatPaginator } from "./core/language/TranslatableMatPaginator";
 import { FaIconLibrary } from "@fortawesome/angular-fontawesome";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
@@ -81,20 +72,20 @@ import { HistoricalDataModule } from "./features/historical-data/historical-data
 import { MatchingEntitiesModule } from "./features/matching-entities/matching-entities.module";
 import { ProgressDashboardWidgetModule } from "./features/dashboard-widgets/progress-dashboard-widget/progress-dashboard-widget.module";
 import { ReportingModule } from "./features/reporting/reporting.module";
-import { Router, RouterModule } from "@angular/router";
+import { RouterModule } from "@angular/router";
 import { TodosModule } from "./features/todos/todos.module";
-import moment from "moment";
-import { getLocaleFirstDayOfWeek } from "@angular/common";
 import { waitForChangeTo } from "./core/session/session-states/session-utils";
 import { LoginState } from "./core/session/session-states/login-state.enum";
-import { appInitializers } from "./app-initializers";
+import { APP_INITIALIZER_PROPAGATE_CONFIG_UPDATES } from "./core/config/config.app-initializer";
 import { ImportModule } from "./core/import/import.module";
 import { ShortcutDashboardWidgetModule } from "./features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard-widget.module";
 import { EntityCountDashboardWidgetModule } from "./features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard-widget.module";
 import { BirthdayDashboardWidgetModule } from "./features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-widget.module";
 import { MarkdownPageModule } from "./features/markdown-page/markdown-page.module";
 import { LoginStateSubject } from "./core/session/session-type";
 import { AdminModule } from "./core/admin/admin.module";
+import { Logging } from "./core/logging/logging.service";
+import { APP_INITIALIZER_DEMO_DATA } from "./core/demo-data/demo-data.app-initializer";
 
 /**
  * Main entry point of the application.
@@ -147,23 +138,7 @@ import { AdminModule } from "./core/admin/admin.module";
     MatDialogModule,
   ],
   providers: [
-    /* Sentry setup */
-    {
-      provide: ErrorHandler,
-      useValue: Sentry.createErrorHandler(),
-    },
-    {
-      provide: Sentry.TraceService,
-      deps: [Router],
-    },
-    {
-      provide: APP_INITIALIZER,
-      useFactory: () => () => {},
-      deps: [Sentry.TraceService],
-      multi: true,
-    },
-
-    { provide: MatPaginatorIntl, useValue: TranslatableMatPaginator() },
+    ...Logging.getAngularTracingProviders(),
     { provide: ComponentRegistry, useValue: componentRegistry },
     { provide: EntityRegistry, useValue: entityRegistry },
     { provide: WINDOW_TOKEN, useValue: window },
@@ -190,17 +165,13 @@ import { AdminModule } from "./core/admin/admin.module";
       }),
       deps: [LoginStateSubject],
     },
-    appInitializers,
+    APP_INITIALIZER_PROPAGATE_CONFIG_UPDATES,
+    APP_INITIALIZER_DEMO_DATA,
   ],
   bootstrap: [AppComponent],
 })
 export class AppModule {
-  constructor(icons: FaIconLibrary, @Inject(LOCALE_ID) locale: string) {
+  constructor(icons: FaIconLibrary) {
     icons.addIconPacks(fas, far);
-    moment.updateLocale(moment.locale(), {
-      week: {
-        dow: getLocaleFirstDayOfWeek(locale),
-      },
-    });
   }
 }

src/app/app.module.ts

@@ -9,9 +9,12 @@ import {
 import { RouterTestingModule } from "@angular/router/testing";
 import { ConfigService } from "../config/config.service";
 import { UsageAnalyticsConfig } from "./usage-analytics-config";
-import { Subject } from "rxjs";
+import { BehaviorSubject, Subject } from "rxjs";
 import { Config } from "../config/config";
 import { SiteSettingsService } from "../site-settings/site-settings.service";
+import { LoginStateSubject } from "../session/session-type";
+import { SessionSubject } from "../session/auth/session-info";
+import { LoginState } from "../session/session-states/login-state.enum";
 
 describe("AnalyticsService", () => {
   let service: AnalyticsService;
@@ -47,6 +50,11 @@ describe("AnalyticsService", () => {
           provide: SiteSettingsService,
           useValue: { siteName: siteNameSubject },
         },
+        {
+          provide: LoginStateSubject,
+          useValue: new BehaviorSubject(LoginState.LOGGED_IN),
+        },
+        { provide: SessionSubject, useValue: new BehaviorSubject(undefined) },
       ],
     });
     service = TestBed.inject(AnalyticsService);

src/app/core/analytics/analytics.service.spec.ts

@@ -7,6 +7,9 @@ import {
 } from "./usage-analytics-config";
 import { Angulartics2, Angulartics2Matomo } from "angulartics2";
 import md5 from "md5";
+import { LoginState } from "../session/session-states/login-state.enum";
+import { LoginStateSubject } from "../session/session-type";
+import { SessionSubject } from "../session/auth/session-info";
 
 /**
  * Track usage analytics data and report it to a backend server like Matomo.
@@ -23,7 +26,25 @@ export class AnalyticsService {
     private angulartics2: Angulartics2,
     private angulartics2Matomo: Angulartics2Matomo,
     private configService: ConfigService,
-  ) {}
+    loginState: LoginStateSubject,
+    private sessionInfo: SessionSubject,
+  ) {
+    if (environment.production) {
+      this.init();
+    }
+
+    // update the user context for remote error logging and tracking and load config initially
+    loginState.subscribe((s: LoginState) => this.updateSessionInfo(s));
+  }
+
+  private updateSessionInfo(newState: LoginState): void {
+    if (newState === LoginState.LOGGED_IN) {
+      const username = this.sessionInfo.value?.name;
+      this.setUser(username);
+    } else {
+      this.setUser(undefined);
+    }
+  }
 
   /**
    * Sets a unique user hash which is always for the same user but does not expose the username.

src/app/core/analytics/analytics.service.ts

@@ -0,0 +1,27 @@
+import { APP_INITIALIZER } from "@angular/core";
+import { ConfigService } from "./config.service";
+import { RouterService } from "./dynamic-routing/router.service";
+import { EntityConfigService } from "../entity/entity-config.service";
+import { Router } from "@angular/router";
+
+export const APP_INITIALIZER_PROPAGATE_CONFIG_UPDATES = {
+  provide: APP_INITIALIZER,
+  useFactory:
+    (
+      configService: ConfigService,
+      routerService: RouterService,
+      entityConfigService: EntityConfigService,
+      router: Router,
+    ) =>
+    async () => {
+      // Re-trigger services that depend on the config when something changes
+      configService.configUpdates.subscribe(() => {
+        routerService.initRouting();
+        entityConfigService.setupEntitiesFromConfig();
+        const url = location.href.replace(location.origin, "");
+        router.navigateByUrl(url, { skipLocationChange: true });
+      });
+    },
+  deps: [ConfigService, RouterService, EntityConfigService, Router],
+  multi: true,
+};

src/app/core/config/config.app-initializer.ts

@@ -0,0 +1,24 @@
+import {
+  APP_INITIALIZER,
+  Injector,
+  ɵcreateInjector as createInjector,
+} from "@angular/core";
+import { environment } from "../../../environments/environment";
+
+/**
+ * Provide this in the app module to run the demo data generation with lazy-loading
+ * (no download of module code if not in demo mode).
+ */
+export const APP_INITIALIZER_DEMO_DATA = {
+  provide: APP_INITIALIZER,
+  useFactory: (injector: Injector) => async () => {
+    if (environment.demo_mode) {
+      const m = await import("./demo-data.module");
+      await createInjector(m.DemoDataModule, injector)
+        .get(m.DemoDataModule)
+        .publishDemoData();
+    }
+  },
+  deps: [Injector],
+  multi: true,
+};

src/app/core/demo-data/demo-data.app-initializer.ts

@@ -2,14 +2,17 @@ import { applicationConfig, Meta, StoryFn } from "@storybook/angular";
 import { StorybookBaseModule } from "../../../utils/storybook-base.module";
 import { ImportEntityTypeComponent } from "./import-entity-type.component";
 import { importProvidersFrom } from "@angular/core";
-import { appInitializers } from "../../../app-initializers";
+import { APP_INITIALIZER_PROPAGATE_CONFIG_UPDATES } from "../../config/config.app-initializer";
 
 export default {
   title: "Features/Import/2 Select Entity Type",
   component: ImportEntityTypeComponent,
   decorators: [
     applicationConfig({
-      providers: [importProvidersFrom(StorybookBaseModule), appInitializers],
+      providers: [
+        importProvidersFrom(StorybookBaseModule),
+        APP_INITIALIZER_PROPAGATE_CONFIG_UPDATES,
+      ],
     }),
   ],
 } as Meta;

src/app/core/import/import-entity-type/import-entity-type.stories.ts

@@ -1,7 +1,11 @@
-import { NgModule } from "@angular/core";
+import { Inject, LOCALE_ID, NgModule } from "@angular/core";
 import { LanguageService } from "./language.service";
 import { HTTP_INTERCEPTORS } from "@angular/common/http";
 import { AcceptLanguageInterceptor } from "./accept-language.interceptor";
+import moment from "moment/moment";
+import { getLocaleFirstDayOfWeek } from "@angular/common";
+import { MatPaginatorIntl } from "@angular/material/paginator";
+import { TranslatableMatPaginator } from "./TranslatableMatPaginator";
 
 /**
  * Module that aids in the management and choice of translations/languages
@@ -19,10 +23,20 @@ import { AcceptLanguageInterceptor } from "./accept-language.interceptor";
       useClass: AcceptLanguageInterceptor,
       multi: true,
     },
+    { provide: MatPaginatorIntl, useValue: TranslatableMatPaginator() },
   ],
 })
 export class LanguageModule {
-  constructor(translationService: LanguageService) {
+  constructor(
+    translationService: LanguageService,
+    @Inject(LOCALE_ID) locale: string,
+  ) {
     translationService.initDefaultLanguage();
+
+    moment.updateLocale(moment.locale(), {
+      week: {
+        dow: getLocaleFirstDayOfWeek(locale),
+      },
+    });
   }
 }