I18n configuration for angular19 standalone components seems to be broken

[brankoiliccc]

I have recently updated my project to angular 19.

All examples I could find still reference module type configuration.

i18n configuration in main.ts or component#providers array does nothing. It defaults to zhHans

    selector: 'app-gantt-tab',
    templateUrl: './gantt-tab.component.html',
    styleUrls: ['./gantt-tab.component.scss'],
    imports: [        
      CommonModule,
      MatCardModule,
      MatButtonModule,
      MatChipsModule,
      MatIconModule,
      MatMenuModule,
      MatProgressSpinnerModule,
      FormsModule,
      NgxGanttModule,
      MatTableModule,
      MatSelectModule,
      DragDropModule,
      IconModule,
      ],
    standalone: true,
    providers: [
      GanttPrintService,
      { provide: GANTT_I18N_LOCALE_TOKEN, useValue: [{ locale: GanttI18nLocale.enUs }] },
      {
        provide: GANTT_GLOBAL_CONFIG, useValue: {
          locale: GanttI18nLocale.enUs,
          linkOptions: {
            dependencyTypes: [GanttLinkType.fs],
            showArrow: false,
            lineType: GanttLinkLineType.curve
          },
          styleOptions: {
            headerHeight: 44,
            lineHeight: 44,
            barHeight: 22
          },
          dateOptions: {
            weekStartsOn: 1
          }
        }
      },
    ]
})
export class GanttTabComponent implements OnInit {

and main.ts

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserModule, RouterModule, AppRoutingModule, MaterialModule, IconModule, MatDatepickerModule, MatMomentDateModule, ResponsiveTableModule, NgxMatSelectSearchModule, NgChartsModule),
    { provide: ErrorHandler, useClass: PlatformErrorHandler },
    { provide: HTTP_INTERCEPTORS, useClass: PlatformRequestInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: GatewayInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: XsrfInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: SpinnerInterceptor, multi: true },
    { provide: REMOVE_STYLES_ON_COMPONENT_DESTROY, useValue: false },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
    provideAppInitializer(() => {
      const initializerFn = (appInit)(inject(AppInitializeService));
      return initializerFn();
    }),
    { provide: LOCALE_ID, useFactory: localeFactory },
    { provide: APP_BASE_HREF, useFactory: localeBaseHrefFactory, deps: [LOCALE_ID] },
    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: [{ locale: GanttI18nLocale.enUs }] },
    {
      provide: GANTT_GLOBAL_CONFIG, useValue: {
        locale: GanttI18nLocale.enUs,
        linkOptions: {
          dependencyTypes: [GanttLinkType.fs],
          showArrow: false,
          lineType: GanttLinkLineType.curve
        },
        styleOptions: {
          headerHeight: 44,
          lineHeight: 44,
          barHeight: 22
        },
        dateOptions: {
          weekStartsOn: 1
        }
      }
    },



    // { provide: 'gantt-i18n-locale', useValue: GanttI18nLocale.enUs}, 
    provideHttpClient(withInterceptorsFromDi(), withXsrfConfiguration({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-XSRF-TOKEN'
    })),
    provideAnimations()
  ]
});

[brankoiliccc]

Dependencies:

    "@angular/animations": "19.2.14",
    "@angular/cdk": "19.2.19",
    "@angular/common": "19.2.14",
    "@angular/compiler": "19.2.14",
    "@angular/core": "19.2.14",
    "@angular/forms": "19.2.14",
    "@angular/localize": "19.2.14",
    "@angular/material": "19.2.19",
    "@angular/material-moment-adapter": "19.2.19",
    "@angular/platform-browser": "19.2.14",
    "@angular/platform-browser-dynamic": "19.2.14",
    "@angular/platform-server": "19.2.14",
    "@angular/router": "19.2.14",
    "@angular/ssr": "^19.2.15",

Also tried migrating just this component to standalone: false, but still day labels are not in English language!

@NgModule({
  declarations: [ReportingManufactureGanttComponent],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatIconModule,
    MatMenuModule,
    MatProgressSpinnerModule,
    MatSelectModule,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    DragDropModule,
    IconModule,
    MatSelectSearchComponent,
    MatSelectSearchClearDirective,
    NgxGanttModule,
    ReportingManufactureRoutingModule
  ],
  providers: [
    { provide: GANTT_GLOBAL_CONFIG, useValue: { locale: GanttI18nLocale.enUs } }
  ]
})
export class ReportingManufactureModule { }

[brankoiliccc]

For anyone wondering a have found the solution by implementing custom hour view.
I believe the issue is in this line here https://github.com/worktile/ngx-gantt/blob/master/packages/gantt/src/views/hour.ts#L14

I want to give thanks to maintainers of this awesome library.

[giri3sg]

@brankoiliccc not sure if this is a good solution but it works for me

import { enUsLocale, GANTT_I18N_LOCALE_TOKEN } from '@worktile/gantt';
i

    bootstrapApplication(AppComponent, {
        providers: [
            ...
            { provide: GANTT_I18N_LOCALE_TOKEN, useValue: enUsLocale, multi: true },
...