geonetwork-ui 2.10.0-dev.5f1c6f718 → 2.10.0-dev.6183d942b

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.html

@@ -6,7 +6,7 @@
     type="url"
     [value]="inputValue"
     (input)="handleInput($event)"
-    (keydown.enter)="handleUpload(input)"
+    (keydown.enter)="handleUpload(input, $event)"
     [placeholder]="placeholder"
     [attr.aria-label]="placeholder"
     [disabled]="disabled"
@@ -25,7 +25,7 @@
       extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
       type="primary"
       [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
-      (buttonClick)="handleUpload(input)"
+      (buttonClick)="handleUpload(input, $event)"
     >
       <ng-content>
         <ng-icon name="iconoirArrowUp"></ng-icon>

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.ts

@@ -81,7 +81,8 @@ export class UrlInputComponent implements OnChanges {
     this.valueChange.next(value)
   }
 
-  handleUpload(element: HTMLInputElement) {
+  handleUpload(element: HTMLInputElement, event: Event) {
+    event.stopPropagation()
     const value = element.value
     if (!value || !this.isValidUrl(value)) return
     this.uploadClick.next(value)

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -3,14 +3,14 @@
     <span class="flex-none font-bold" translate="">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
-      <span
+      <ng-icon
         *ngIf="hint"
-        class="material-symbols-outlined m-2 gn-ui-icon-small"
+        name="matHelpOutline"
+        size="16"
+        class="m-2"
         [matTooltip]="hint"
         matTooltipPosition="above"
-      >
-        help
-      </span>
+      ></ng-icon>
     </div>
   </div>
   <div class="flex-1 mt-2">

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -9,7 +11,13 @@ import { TranslateDirective } from '@ngx-translate/core'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatTooltipModule, CommonModule, TranslateDirective],
+  imports: [
+    MatTooltipModule,
+    CommonModule,
+    TranslateDirective,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ matHelpOutline })],
 })
 export class FormFieldWrapperComponent {
   @Input() label?: string

package/src/libs/ui/layout/src/lib/sortable-list/sortable-list.component.html

@@ -5,12 +5,12 @@
 >
   @for (item of items; track trackByFn(index); let index = $index) {
     <div class="sortable-box bg-white flex items-center" cdkDrag>
-      <span
+      <ng-icon
         cdkDragHandle
-        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
-      >
-        drag_handle
-      </span>
+        name="matDragHandleOutline"
+        size="20"
+        class="mx-[10px] cursor-grab flex-none"
+      ></ng-icon>
       <div class="flex-1">
         <ng-container
           *ngTemplateOutlet="
@@ -29,8 +29,8 @@
         class="ml-[8px] mr-[10px]"
         (buttonClick)="removeItem(index)"
         data-test="remove-item"
-        ><span class="material-symbols-outlined gn-ui-icon-medium">close</span>
-      </gn-ui-button>
+        ><ng-icon name="matCloseOutline" size="20"></ng-icon
+      ></gn-ui-button>
     </div>
   }
 </div>

package/src/libs/ui/layout/src/lib/sortable-list/sortable-list.component.ts

@@ -15,6 +15,11 @@ import {
   TemplateRef,
 } from '@angular/core'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matCloseOutline,
+  matDragHandleOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-sortable-list',
@@ -22,7 +27,15 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
   styleUrls: ['sortable-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, CdkDropList, CdkDrag, CdkDragHandle, ButtonComponent],
+  imports: [
+    CommonModule,
+    CdkDropList,
+    CdkDrag,
+    CdkDragHandle,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ matDragHandleOutline, matCloseOutline })],
 })
 export class SortableListComponent {
   @Input() elementTemplate: TemplateRef<unknown>

package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts

@@ -1,18 +1,11 @@
 import { ChangeDetectorRef, Component, inject, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { Geometry } from 'geojson'
-import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON.js'
-import GeoJSON from 'ol/format/GeoJSON.js'
-import { Polygon } from 'ol/geom.js'
-import {
-  createViewFromLayer,
-  MapContext,
-  MapContextLayer,
-} from '@geospatial-sdk/core'
+import { createViewFromLayer, MapContext } from '@geospatial-sdk/core'
 import { MapContainerComponent } from '../map-container/map-container.component'
 import { BehaviorSubject, from, Observable, of } from 'rxjs'
 import { map, switchMap, tap } from 'rxjs/operators'
 import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { createSpatialExtentLayer } from '../../map-utils'
 
 @Component({
   selector: 'gn-ui-spatial-extent',
@@ -30,39 +23,10 @@ export class SpatialExtentComponent {
   spatialExtents$ = new BehaviorSubject<DatasetSpatialExtent[]>([])
   mapContext$: Observable<MapContext> = this.spatialExtents$.pipe(
     switchMap((extents) => {
-      if (extents.length === 0) {
+      const layer = createSpatialExtentLayer(extents)
+      if (!layer) {
         return of(null)
       }
-      const featureCollection: GeoJSONFeatureCollection = {
-        type: 'FeatureCollection',
-        features: [],
-      }
-      extents.forEach((extent) => {
-        if (extent.geometry) {
-          featureCollection.features.push({
-            type: 'Feature',
-            properties: {},
-            geometry: extent.geometry,
-          })
-        } else if (extent.bbox?.length >= 0) {
-          featureCollection.features.push({
-            type: 'Feature',
-            properties: {},
-            geometry: this.bboxCoordsToGeometry(extent.bbox),
-          })
-        }
-      })
-
-      const layer: MapContextLayer = {
-        type: 'geojson',
-        data: featureCollection,
-        label: 'Spatial extents',
-        style: {
-          'stroke-color': 'black',
-          'stroke-width': 2,
-          'fill-color': 'rgba(153, 153, 153, 0.3)',
-        },
-      }
       return from(createViewFromLayer(layer)).pipe(
         map((view) => ({ view, layers: [layer] }) as MapContext),
         tap(() => this._cdr.markForCheck())
@@ -71,18 +35,4 @@ export class SpatialExtentComponent {
   )
 
   error = ''
-
-  bboxCoordsToGeometry(bbox: [number, number, number, number]): Geometry {
-    const geometry = new Polygon([
-      [
-        [bbox[0], bbox[1]],
-        [bbox[0], bbox[3]],
-        [bbox[2], bbox[3]],
-        [bbox[2], bbox[1]],
-        [bbox[0], bbox[1]],
-      ],
-    ])
-
-    return new GeoJSON().writeGeometryObject(geometry)
-  }
 }

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -12,6 +12,54 @@ import {
   MouseWheelZoom,
 } from 'ol/interaction.js'
 import MapBrowserEvent from 'ol/MapBrowserEvent.js'
+import type { DatasetSpatialExtent } from '../../../../../libs/common/domain/src/lib/model/record'
+import type {
+  MapContextLayer,
+  MapContextLayerGeojson,
+} from '@geospatial-sdk/core'
+import { spatialExtentsToFeatureCollection } from '../../../../../libs/util/shared/src'
+
+export type SpatialExtentLayerStyle = NonNullable<
+  MapContextLayerGeojson['style']
+>
+
+/**
+ * Default style for a spatial-extent layer: a solid black outline over a
+ * translucent grey fill.
+ */
+export const DEFAULT_SPATIAL_EXTENT_STYLE: SpatialExtentLayerStyle = {
+  'stroke-color': 'black',
+  'stroke-width': 2,
+  'fill-color': 'rgba(153, 153, 153, 0.3)',
+}
+
+/**
+ * Builds a GeoJSON map layer drawing the given spatial extents: each extent is
+ * rendered from its own geometry or, when only a bounding box is available,
+ * from a polygon derived from that box.
+ *
+ * @returns the layer, or `null` when none of the extents can be represented.
+ */
+export function createSpatialExtentLayer(
+  extents: DatasetSpatialExtent[],
+  overrides?: {
+    label?: string
+    clickable?: boolean
+    style?: SpatialExtentLayerStyle
+  }
+): MapContextLayer | null {
+  const data = spatialExtentsToFeatureCollection(extents)
+  if (data.features.length === 0) {
+    return null
+  }
+  return {
+    type: 'geojson',
+    data,
+    label: 'Spatial extents',
+    style: DEFAULT_SPATIAL_EXTENT_STYLE,
+    ...overrides,
+  }
+}
 
 export function prioritizePageScroll(interactions: Collection<Interaction>) {
   interactions.clear()

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts

@@ -52,7 +52,7 @@ export class RecordPreviewFeedComponent extends RecordPreviewComponent {
   protected elementRef: ElementRef
   private translate = inject(TranslateService)
 
-  timeFormat = new Duration(this.translate.currentLang, {})
+  timeFormat = new Duration(this.translate.getCurrentLang(), {})
 
   constructor() {
     const elementRef = inject(ElementRef)

package/src/libs/ui/widgets/src/lib/popover/popover.component.ts

@@ -28,7 +28,13 @@ export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
   @Input() content: string | TemplateRef<any>
-  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
+  @Input() theme:
+    | 'light'
+    | 'light-border'
+    | 'translucent'
+    | 'material'
+    | 'dark'
+    | ''
 
   private tippyInstance: Instance
   private view: EmbeddedViewRef<any>

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -1,6 +1,8 @@
 import * as TOML from '@ltd/j-toml'
 import {
   checkMetadataLanguage,
+  checkNewRecordDefaultLanguage,
+  checkNewRecordStandard,
   parseConfigSection,
   parseMultiConfigSection,
   parseTranslationsConfigSection,
@@ -8,6 +10,7 @@ import {
 import {
   CustomTranslations,
   CustomTranslationsAllLanguages,
+  EditorConfig,
   GlobalConfig,
   LayerConfig,
   MapConfig,
@@ -15,10 +18,15 @@ import {
   SearchConfig,
   ThemeConfig,
 } from './model'
-import { TranslateCompiler, TranslateLoader } from '@ngx-translate/core'
+import {
+  TranslateCompiler,
+  TranslateLoader,
+  TranslateModuleConfig,
+} from '@ngx-translate/core'
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
-import { HttpClient } from '@angular/common/http'
 import { FileWithOverridesTranslateLoader } from './i18n/file-with-overrides.translate.loader'
+import { TRANSLATE_HTTP_LOADER_CONFIG } from '@ngx-translate/http-loader'
+import { HttpClient } from '@angular/common/http'
 
 const MISSING_CONFIG_ERROR = `Application configuration was not initialized correctly.
 This error might show up in case of an invalid/malformed configuration file.
@@ -51,6 +59,12 @@ export function getOptionalSearchConfig(): SearchConfig | null {
   return searchConfig
 }
 
+let editorConfig: EditorConfig = null
+
+export function getOptionalEditorConfig(): EditorConfig | null {
+  return editorConfig
+}
+
 let metadataQualityConfig: MetadataQualityConfig = null
 export function getMetadataQualityConfig(): MetadataQualityConfig {
   return (
@@ -285,6 +299,45 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
               SORTABLE: parsedMetadataQualitySection.sortable,
             } as MetadataQualityConfig)
 
+      let parsedEditingSection = parseConfigSection(
+        parsed,
+        'editing',
+        [],
+        ['new_record_default_language', 'new_record_standard'],
+        warnings,
+        errors
+      )
+      if (
+        parsedEditingSection !== null &&
+        parsedEditingSection.new_record_default_language !== undefined
+      ) {
+        parsedEditingSection = checkNewRecordDefaultLanguage(
+          parsedEditingSection,
+          warnings
+        )
+      }
+      if (
+        parsedEditingSection !== null &&
+        parsedEditingSection.new_record_standard !== undefined
+      ) {
+        parsedEditingSection = checkNewRecordStandard(
+          parsedEditingSection,
+          warnings
+        )
+      }
+      editorConfig =
+        parsedEditingSection === null
+          ? null
+          : ({
+              NEW_RECORD_DEFAULT_LANGUAGE:
+                parsedEditingSection.new_record_default_language as
+                  | string
+                  | undefined,
+              NEW_RECORD_STANDARD: parsedEditingSection.new_record_standard as
+                | EditorConfig['NEW_RECORD_STANDARD']
+                | undefined,
+            } as EditorConfig)
+
       customTranslations = parseTranslationsConfigSection(
         parsed,
         'translations'
@@ -309,19 +362,27 @@ export function isConfigLoaded() {
 export function _reset() {
   globalConfig = null
   themeConfig = null
+  editorConfig = null
   customTranslations = null
 }
 
-export const TRANSLATE_WITH_OVERRIDES_CONFIG = {
+export const TRANSLATE_WITH_OVERRIDES_CONFIG: TranslateModuleConfig = {
   compiler: {
     provide: TranslateCompiler,
     useClass: TranslateMessageFormatCompiler,
   },
-  loader: {
-    provide: TranslateLoader,
-    useFactory: function HttpLoaderFactory(http: HttpClient) {
-      return new FileWithOverridesTranslateLoader(http, './assets/i18n/')
+  loader: [
+    {
+      provide: TRANSLATE_HTTP_LOADER_CONFIG,
+      useValue: {
+        prefix: './assets/i18n/',
+        suffix: '.json',
+      },
     },
-    deps: [HttpClient],
-  },
+    {
+      provide: TranslateLoader,
+      useClass: FileWithOverridesTranslateLoader,
+      deps: [HttpClient, TRANSLATE_HTTP_LOADER_CONFIG],
+    },
+  ],
 }

package/src/libs/util/app-config/src/lib/model.ts

@@ -69,6 +69,13 @@ export interface MetadataQualityConfig {
   ENABLED: boolean
 }
 
+export type NewRecordStandard = 'iso19139' | 'iso19115-3'
+
+export interface EditorConfig {
+  NEW_RECORD_DEFAULT_LANGUAGE?: string
+  NEW_RECORD_STANDARD?: NewRecordStandard
+}
+
 export type CustomTranslations = { [translationKey: string]: string }
 export type CustomTranslationsAllLanguages = {
   [lang: string]: CustomTranslations

package/src/libs/util/app-config/src/lib/parse-utils.ts

@@ -1,4 +1,4 @@
-import { toLang2 } from '../../../../../libs/util/i18n/src'
+import { LANG_2_TO_3_MAPPER, toLang2 } from '../../../../../libs/util/i18n/src'
 
 const flatten = (
   base: string,
@@ -137,3 +137,52 @@ export function checkMetadataLanguage(
   }
   return parsedConfigSection
 }
+
+export function checkNewRecordDefaultLanguage(
+  parsedConfigSection: any,
+  outWarnings: string[]
+) {
+  const lang2 = toLang2(
+    parsedConfigSection.new_record_default_language.toLowerCase()
+  )
+  if (!(lang2 in LANG_2_TO_3_MAPPER)) {
+    outWarnings.push(
+      `In the [editing] section: new_record_default_language = "${parsedConfigSection.new_record_default_language}" is not a recognized ISO 639 language code`
+    )
+    return {
+      ...parsedConfigSection,
+      new_record_default_language: undefined,
+    }
+  }
+  return {
+    ...parsedConfigSection,
+    new_record_default_language: lang2,
+  }
+}
+
+export function checkNewRecordStandard(
+  parsedConfigSection: any,
+  outWarnings: string[]
+) {
+  const standard = parsedConfigSection.new_record_standard
+  const normalizedStandard =
+    typeof standard === 'string' ? standard.trim().toLowerCase() : null
+
+  if (
+    normalizedStandard === 'iso19139' ||
+    normalizedStandard === 'iso19115-3'
+  ) {
+    return {
+      ...parsedConfigSection,
+      new_record_standard: normalizedStandard,
+    }
+  }
+
+  outWarnings.push(
+    `In the [editing] section: new_record_standard = "${standard}" is not a supported metadata standard`
+  )
+  return {
+    ...parsedConfigSection,
+    new_record_standard: undefined,
+  }
+}

package/src/libs/util/data-fetcher/src/lib/readers/base-file.ts

@@ -1,4 +1,3 @@
-import { BaseReader } from './base'
 import { DataItem, DatasetInfo, PropertyInfo } from '../model'
 import { getJsonDataItemsProxy, jsonToGeojsonFeature } from '../utils'
 import { generateSqlQuery } from '../sql-utils'
@@ -58,7 +57,7 @@ export class BaseFileReader extends BaseCacheReader {
       this.groupedBy,
       this.aggregations
     )
-    const result = await import('alasql').then((module) =>
+    const result: any[] = await import('alasql').then((module) =>
       module.default(query, [jsonItems])
     )
     return result.map(jsonToGeojsonFeature)

package/src/libs/util/data-fetcher/src/lib/readers/wfs.ts

@@ -1,10 +1,13 @@
 import { EndpointError, WfsEndpoint, WfsVersion } from '@camptocamp/ogc-client'
 import { DataItem, DatasetInfo, FetchError, PropertyInfo } from '../model'
-import { fetchDataAsText } from '../utils'
+import {
+  fetchDataAsText,
+  getJsonDataItemsProxy,
+  jsonToGeojsonFeature,
+} from '../utils'
 import { GmlReader, parseGml } from './gml'
 import { GeojsonReader, parseGeojson } from './geojson'
 import { BaseCacheReader } from './base-cache'
-import { getJsonDataItemsProxy, jsonToGeojsonFeature } from '../utils'
 import { generateSqlQuery } from '../sql-utils'
 
 export async function getWfsEndpoint(wfsUrl: string): Promise<WfsEndpoint> {
@@ -167,7 +170,7 @@ export class WfsReader extends BaseCacheReader {
       this.groupedBy,
       this.aggregations
     )
-    const result = await import('alasql').then((module) =>
+    const result: any[] = await import('alasql').then((module) =>
       module.default(query, [jsonItems])
     )
     return result.map(jsonToGeojsonFeature)

package/src/libs/util/i18n/src/index.ts

@@ -2,6 +2,5 @@ export * from './lib/i18n.providers'
 export * from './lib/i18n.constants'
 export * from './lib/i18n.interceptor'
 export * from './lib/file.translate.loader'
-export * from './lib/embedded.translate.loader'
 export * from './lib/translate.loader.utils'
 export * from './lib/language-codes'

package/src/libs/util/i18n/src/lib/i18n.constants.ts

@@ -1,6 +1,4 @@
-import { HttpClient } from '@angular/common/http'
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
-import { FileTranslateLoader } from './file.translate.loader'
 import {
   TranslateCompiler,
   TranslateDefaultParser,
@@ -9,26 +7,34 @@ import {
   TranslateParser,
 } from '@ngx-translate/core'
 import { Injectable } from '@angular/core'
+import { TRANSLATE_HTTP_LOADER_CONFIG } from '@ngx-translate/http-loader'
+import { HttpClient } from '@angular/common/http'
+import { FileTranslateLoader } from './file.translate.loader'
 
 export const DEFAULT_LANG = 'en'
 
 // Caution: changing this can break language selection from third parties!
 export const LANGUAGE_STORAGE_KEY = 'geonetwork-ui-language'
 
-export function HttpLoaderFactory(http: HttpClient) {
-  return new FileTranslateLoader(http, './assets/i18n/')
-}
-
 export const TRANSLATE_DEFAULT_CONFIG: TranslateModuleConfig = {
   compiler: {
     provide: TranslateCompiler,
     useClass: TranslateMessageFormatCompiler,
   },
-  loader: {
-    provide: TranslateLoader,
-    useFactory: HttpLoaderFactory,
-    deps: [HttpClient],
-  },
+  loader: [
+    {
+      provide: TRANSLATE_HTTP_LOADER_CONFIG,
+      useValue: {
+        prefix: './assets/i18n/',
+        suffix: '.json',
+      },
+    },
+    {
+      provide: TranslateLoader,
+      useClass: FileTranslateLoader,
+      deps: [HttpClient, TRANSLATE_HTTP_LOADER_CONFIG],
+    },
+  ],
 }
 
 @Injectable()

package/src/libs/util/i18n/src/lib/i18n.interceptor.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/common/http'
 import { DEFAULT_LANG } from './i18n.constants'
 import { Observable } from 'rxjs'
-import { Injectable, Injector, inject } from '@angular/core'
+import { inject, Injectable, Injector } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 
 @Injectable()
@@ -21,7 +21,7 @@ export class I18nInterceptor implements HttpInterceptor {
     const translate = this.injector.get(TranslateService)
     request = request.clone({
       setHeaders: {
-        'Accept-Language': translate.currentLang || DEFAULT_LANG,
+        'Accept-Language': translate.getCurrentLang() || DEFAULT_LANG,
       },
     })
     return next.handle(request)

package/src/libs/util/i18n/src/lib/i18n.providers.ts

@@ -1,7 +1,8 @@
 import {
-  APP_INITIALIZER,
   EnvironmentProviders,
+  inject,
   makeEnvironmentProviders,
+  provideAppInitializer,
   Provider,
 } from '@angular/core'
 import {
@@ -22,17 +23,16 @@ import {
 } from '@angular/common/http'
 import { I18nInterceptor } from './i18n.interceptor'
 
-function i18nInitializerFromLocalStorageFactory(translate: TranslateService) {
-  return () => {
-    translate.setDefaultLang(DEFAULT_LANG)
-    let storageLang = null
-    try {
-      storageLang = localStorage.getItem(LANGUAGE_STORAGE_KEY)
-    } catch (error) {
-      console.warn(error)
-    }
-    translate.use(storageLang || translate.getBrowserLang() || DEFAULT_LANG)
+function i18nInitializerFromLocalStorageFactory() {
+  const translate = inject(TranslateService)
+  translate.setFallbackLang(DEFAULT_LANG)
+  let storageLang = null
+  try {
+    storageLang = localStorage.getItem(LANGUAGE_STORAGE_KEY)
+  } catch (error) {
+    console.warn(error)
   }
+  translate.use(storageLang || translate.getBrowserLang() || DEFAULT_LANG)
 }
 
 export function provideI18n(
@@ -56,12 +56,9 @@ export function provideI18n(
     provideTranslateService(usedConfig),
   ]
   if (useLocalStorage) {
-    providers.push({
-      provide: APP_INITIALIZER,
-      useFactory: i18nInitializerFromLocalStorageFactory,
-      deps: [TranslateService],
-      multi: true,
-    })
+    providers.push(
+      provideAppInitializer(i18nInitializerFromLocalStorageFactory)
+    )
   }
 
   return makeEnvironmentProviders(providers)