Move customElements into AppModule bootstrap

The AppModule bootstrap ensures that the configuration is loaded before the customElements are registered. see https://stackoverflow.com/questions/61716000/angular-elements-with-app-initializer for more information
opf · Dec 7, 2023 · ccf1b5e · ccf1b5e
1 parent e82c358
commit ccf1b5e
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 46 deletions.
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -26,17 +26,9 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  APP_INITIALIZER,
-  ApplicationRef,
-  Injector,
-  NgModule,
-} from '@angular/core';
+import { APP_INITIALIZER, ApplicationRef, Injector, NgModule } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
-import {
-  HTTP_INTERCEPTORS, HttpClient,
-  HttpClientModule,
-} from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
   OpContextMenuTrigger,
@@ -118,6 +110,41 @@ import { OpUploadService } from 'core-app/core/upload/upload.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { FogUploadService } from 'core-app/core/upload/fog-upload.service';
 import { LocalUploadService } from 'core-app/core/upload/local-upload.service';
+import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
+import {
+  EmbeddedTablesMacroComponent,
+} from 'core-app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component';
+import { OpPrincipalComponent } from 'core-app/shared/components/principal/principal.component';
+import {
+  OpBasicSingleDatePickerComponent,
+} from 'core-app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component';
+import {
+  OpBasicRangeDatePickerComponent,
+} from 'core-app/shared/components/datepicker/basic-range-date-picker/basic-range-date-picker.component';
+import { GlobalSearchInputComponent } from 'core-app/core/global_search/input/global-search-input.component';
+import {
+  OpAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
+import {
+  ProjectAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component';
+import {
+  AutocompleteSelectDecorationComponent,
+} from 'core-app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component';
+import {
+  MembersAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/members-autocompleter/members-autocompleter.component';
+import {
+  UserAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/user-autocompleter/user-autocompleter.component';
+import { AttributeValueMacroComponent } from 'core-app/shared/components/fields/macros/attribute-value-macro.component';
+import { AttributeLabelMacroComponent } from 'core-app/shared/components/fields/macros/attribute-label-macro.component';
+import {
+  WorkPackageQuickinfoMacroComponent,
+} from 'core-app/shared/components/fields/macros/work-package-quickinfo-macro.component';
+import {
+  CkeditorAugmentedTextareaComponent,
+} from 'core-app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component';
 
 export function initializeServices(injector:Injector) {
   return () => {
@@ -272,6 +299,7 @@ export class OpenProjectModule {
     // Perform global dynamic bootstrapping of our entry components
     // that are in the current DOM response.
     DynamicBootstrapper.bootstrapOptionalDocument(appRef, document);
+    this.registerCustomElements(appRef.injector);
 
     // Call hook service to allow modules to bootstrap additional elements.
     // We can't use ngDoBootstrap in nested modules since they are not called.
@@ -282,4 +310,21 @@ export class OpenProjectModule {
         DynamicBootstrapper.bootstrapOptionalDocument(appRef, document, results);
       });
   }
+
+  private registerCustomElements(injector:Injector) {
+    registerCustomElement('opce-macro-embedded-table', EmbeddedTablesMacroComponent, { injector });
+    registerCustomElement('opce-principal', OpPrincipalComponent, { injector });
+    registerCustomElement('opce-single-date-picker', OpBasicSingleDatePickerComponent, { injector });
+    registerCustomElement('opce-range-date-picker', OpBasicRangeDatePickerComponent, { injector });
+    registerCustomElement('opce-global-search', GlobalSearchInputComponent, { injector });
+    registerCustomElement('opce-autocompleter', OpAutocompleterComponent, { injector });
+    registerCustomElement('opce-project-autocompleter', ProjectAutocompleterComponent, { injector });
+    registerCustomElement('opce-select-decoration', AutocompleteSelectDecorationComponent, { injector });
+    registerCustomElement('opce-members-autocompleter', MembersAutocompleterComponent, { injector });
+    registerCustomElement('opce-user-autocompleter', UserAutocompleterComponent, { injector });
+    registerCustomElement('opce-macro-attribute-value', AttributeValueMacroComponent, { injector });
+    registerCustomElement('opce-macro-attribute-label', AttributeLabelMacroComponent, { injector });
+    registerCustomElement('opce-macro-wp-quickinfo', WorkPackageQuickinfoMacroComponent, { injector });
+    registerCustomElement('opce-ckeditor-augmented-textarea', CkeditorAugmentedTextareaComponent, { injector });
+  }
 }
diff --git a/frontend/src/app/core/global_search/openproject-global-search.module.ts b/frontend/src/app/core/global_search/openproject-global-search.module.ts
@@ -41,7 +41,6 @@ import {
 } from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
 import { OpSharedModule } from 'core-app/shared/shared.module';
 import { RecentItemsService } from 'core-app/core/recent-items.service';
-import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -63,6 +62,5 @@ import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-el
 })
 export class OpenprojectGlobalSearchModule {
   constructor(readonly injector:Injector) {
-    registerCustomElement('opce-global-search', GlobalSearchInputComponent, { injector });
   }
 }
diff --git a/frontend/src/app/features/work-packages/openproject-work-packages.module.ts b/frontend/src/app/features/work-packages/openproject-work-packages.module.ts
@@ -417,7 +417,6 @@ import {
 import {
   WorkPackageShareModalComponent,
 } from 'core-app/features/work-packages/components/wp-share-modal/wp-share.modal';
-import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -695,10 +694,8 @@ import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-el
 export class OpenprojectWorkPackagesModule {
   static bootstrapAttributeGroupsCalled = false;
 
-  constructor(injector:Injector) {
+  constructor(private injector:Injector) {
     OpenprojectWorkPackagesModule.bootstrapAttributeGroups(injector);
-
-    registerCustomElement('opce-macro-embedded-table', EmbeddedTablesMacroComponent, { injector });
   }
 
   // The static property prevents running the function

diff --git a/frontend/src/app/shared/components/autocompleter/openproject-autocompleter.module.ts b/frontend/src/app/shared/components/autocompleter/openproject-autocompleter.module.ts
@@ -49,14 +49,12 @@ import {
   OpAutocompleterFooterTemplateDirective,
 } from 'core-app/shared/components/autocompleter/autocompleter-footer-template/op-autocompleter-footer-template.directive';
 import { OpSearchHighlightDirective } from 'core-app/shared/directives/search-highlight.directive';
-import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
-import {
-  MembersAutocompleterComponent,
-} from 'core-app/shared/components/autocompleter/members-autocompleter/members-autocompleter.component';
 import {
   UserAutocompleterTemplateComponent,
 } from 'core-app/shared/components/autocompleter/user-autocompleter/user-autocompleter-template.component';
-import { ProjectAutocompleterTemplateComponent } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component';
+import {
+  ProjectAutocompleterTemplateComponent,
+} from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component';
 
 export const OPENPROJECT_AUTOCOMPLETE_COMPONENTS = [
   CreateAutocompleterComponent,
@@ -95,10 +93,5 @@ export const OPENPROJECT_AUTOCOMPLETE_COMPONENTS = [
 })
 export class OpenprojectAutocompleterModule {
   constructor(injector:Injector) {
-    registerCustomElement('opce-autocompleter', OpAutocompleterComponent, { injector });
-    registerCustomElement('opce-project-autocompleter', ProjectAutocompleterComponent, { injector });
-    registerCustomElement('opce-select-decoration', AutocompleteSelectDecorationComponent, { injector });
-    registerCustomElement('opce-members-autocompleter', MembersAutocompleterComponent, { injector });
-    registerCustomElement('opce-user-autocompleter', UserAutocompleterComponent, { injector });
   }
 }
diff --git a/frontend/src/app/shared/components/datepicker/basic-datepicker.module.ts b/frontend/src/app/shared/components/datepicker/basic-datepicker.module.ts
@@ -5,7 +5,6 @@ import { CommonModule } from '@angular/common';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { OpBasicRangeDatePickerComponent } from './basic-range-date-picker/basic-range-date-picker.component';
 import { OpBasicSingleDatePickerComponent } from './basic-single-date-picker/basic-single-date-picker.component';
-import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -30,7 +29,5 @@ import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-el
 })
 export class OpBasicDatePickerModule {
   constructor(readonly injector:Injector) {
-    registerCustomElement('opce-single-date-picker', OpBasicSingleDatePickerComponent, { injector });
-    registerCustomElement('opce-range-date-picker', OpBasicRangeDatePickerComponent, { injector });
   }
 }
diff --git a/frontend/src/app/shared/components/editor/openproject-editor.module.ts b/frontend/src/app/shared/components/editor/openproject-editor.module.ts
@@ -26,24 +26,27 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  APP_INITIALIZER,
-  Injector,
-  NgModule,
-} from '@angular/core';
+import { APP_INITIALIZER, Injector, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { OpenprojectAttachmentsModule } from 'core-app/shared/components/attachments/openproject-attachments.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
-import { CkeditorAugmentedTextareaComponent } from 'core-app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component';
+import {
+  CkeditorAugmentedTextareaComponent,
+} from 'core-app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component';
 import { OpCkeditorComponent } from 'core-app/shared/components/editor/components/ckeditor/op-ckeditor.component';
 import { CKEditorSetupService } from 'core-app/shared/components/editor/components/ckeditor/ckeditor-setup.service';
 import { CKEditorPreviewService } from 'core-app/shared/components/editor/components/ckeditor/ckeditor-preview.service';
 import { EditorMacrosService } from 'core-app/shared/components/modals/editor/editor-macros.service';
-import { WikiIncludePageMacroModalComponent } from 'core-app/shared/components/modals/editor/macro-wiki-include-page-modal/wiki-include-page-macro.modal';
-import { ChildPagesMacroModalComponent } from 'core-app/shared/components/modals/editor/macro-child-pages-modal/child-pages-macro.modal';
-import { CodeBlockMacroModalComponent } from 'core-app/shared/components/modals/editor/macro-code-block-modal/code-block-macro.modal';
-import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
+import {
+  WikiIncludePageMacroModalComponent,
+} from 'core-app/shared/components/modals/editor/macro-wiki-include-page-modal/wiki-include-page-macro.modal';
+import {
+  ChildPagesMacroModalComponent,
+} from 'core-app/shared/components/modals/editor/macro-child-pages-modal/child-pages-macro.modal';
+import {
+  CodeBlockMacroModalComponent,
+} from 'core-app/shared/components/modals/editor/macro-code-block-modal/code-block-macro.modal';
 
 export function initializeServices(injector:Injector) {
   return () => {
@@ -83,6 +86,5 @@ export function initializeServices(injector:Injector) {
 })
 export class OpenprojectEditorModule {
   constructor(injector:Injector) {
-    registerCustomElement('opce-ckeditor-augmented-textarea', CkeditorAugmentedTextareaComponent, { injector });
   }
 }
diff --git a/frontend/src/app/shared/components/fields/openproject-fields.module.ts b/frontend/src/app/shared/components/fields/openproject-fields.module.ts
@@ -105,7 +105,6 @@ import {
 import { CombinedDateEditFieldComponent } from './edit/field-types/combined-date-edit-field.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule } from '@angular/forms';
-import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -171,8 +170,5 @@ import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-el
 })
 export class OpenprojectFieldsModule {
   constructor(injector:Injector) {
-    registerCustomElement('opce-macro-attribute-value', AttributeValueMacroComponent, { injector });
-    registerCustomElement('opce-macro-attribute-label', AttributeLabelMacroComponent, { injector });
-    registerCustomElement('opce-macro-wp-quickinfo', WorkPackageQuickinfoMacroComponent, { injector });
   }
 }
diff --git a/frontend/src/app/shared/components/principal/principal-rendering.module.ts b/frontend/src/app/shared/components/principal/principal-rendering.module.ts
@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { OpPrincipalComponent } from './principal.component';
 import { OpPrincipalListComponent } from './principal-list.component';
 import { PrincipalRendererService } from './principal-renderer.service';
-import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -23,6 +22,5 @@ import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-el
 })
 export class OpenprojectPrincipalRenderingModule {
   constructor(readonly injector:Injector) {
-    registerCustomElement('opce-principal', OpPrincipalComponent, { injector });
   }
 }