Setting locale for Datepipe in Angular 16 standalone Components fails at build

Question

When building locally it works fine. When building in the Gitlab Pipeline I encounter this error:

./src/app/app.component.ts:6:0-55 - Error: Module not found: Error: Can't resolve '@angular/common/locales/de-at' in '/usr/src/app/copacking-frontend/src/app'
Error: src/app/app.component.ts:11:24 - error TS2307: Cannot find module '@angular/common/locales/de-at' or its corresponding type declarations.
11 import localeDeAt from '@angular/common/locales/de-at';

I have this deps: "@angular/animations": "^16.0.1", "@angular/common": "^16.0.1", "@angular/compiler": "^16.0.1", "@angular/core": "^16.0.1", "@angular/forms": "^16.0.1", "@angular/platform-browser": "^16.0.1", "@angular/platform-browser-dynamic": "^16.0.1", "@angular/router": "^16.0.1", "@ngrx/effects": "^16.0.0", "@ngrx/entity": "^16.0.0", "@ngrx/store": "^16.0.0", "@ngrx/store-devtools": "^16.0.0", "angular-calendar": "^0.31.0", "chart.js": "^4.2.1", "date-fns": "^2.30.0", "jwt-decode": "^3.1.2", "keyboard-css": "^1.2.4", "primeicons": "^6.0.1", "primeng": "^16.0.0-rc.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "xlsx": "^0.18.5", "zone.js": "~0.13.0"

In my bootstrapApplication in main.ts

import { bootstrapApplication } from "@angular/platform-browser";
import { provideRouter } from "@angular/router";
import { routes } from "./app/app-routing.module";
import { AppComponent } from "./app/app.component";
import { LOCALE_ID, importProvidersFrom, isDevMode } from "@angular/core";
import { provideEffects } from "@ngrx/effects";
import { provideStoreDevtools } from "@ngrx/store-devtools";
import { AuthEffects } from "./app/services/auth/state/auth.effects";
import { StandortEffects } from "./app/shared/state/standorte/standort.effects";
import { AuftragEffects } from "./app/views/auftraege/state/auftraege.effects";
import { ArtikelEffects } from "./app/views/stammdaten/artikel/state/artikel.effects";
import { UnternehmenEffects } from "./app/views/stammdaten/unternehmen/state/unternehmen.effects";
import { provideStore } from "@ngrx/store";
import { authReducer } from "./app/services/auth/state/auth.reducers";
import { standortReducer } from "./app/shared/state/standorte/standort.reducers";
import { auftraegeReducer } from "./app/views/auftraege/state/auftraege.reducers";
import { artikelReducer } from "./app/views/stammdaten/artikel/state/artikel.reducers";
import { unternehemReducer } from "./app/views/stammdaten/unternehmen/state/unternehmen.reducers";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { AuthInterceptor } from "./app/services/auth/auth.interceptor";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ConfirmationService } from "primeng/api";
import { CalendarModule, DateAdapter} from "angular-calendar";
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

bootstrapApplication(AppComponent, {providers: [
  provideRouter(routes),
  provideEffects([AuthEffects, UnternehmenEffects, StandortEffects, ArtikelEffects, AuftragEffects]),
  provideStore( { 
    auth: authReducer,
    standorte: standortReducer,
    unternehmen: unternehemReducer,
    artikel: artikelReducer,
    auftraege: auftraegeReducer
  }),
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  },
  ConfirmationService,
  { provide: LOCALE_ID, useValue: "de-AT" },
  provideStoreDevtools({ maxAge: 25, logOnly: isDevMode() }),
  importProvidersFrom([
    BrowserAnimationsModule,
    HttpClientModule, 
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory,
    }),
  ])
]});

And in my AppComponent I register it in ngOnInit:

import localeDeAt from '@angular/common/locales/de-at';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    RouterOutlet,
    SidenavComponent,
    CommonModule
  ]
})
export class AppComponent implements OnInit{
ngOnInit() {
    registerLocaleData(localeDeAt);
}
...
}

I tried some things but nothing really lead to any difference.

Could someone enlighten me?

Answer 1

You may try this in main.ts, works for me :

import { registerLocaleData } from '@angular/common';
import localeDeAt from '@angular/common/locales/de-at';

registerLocaleData(localeDeAt, 'de-at');

bootstrapApplication(
// ...
);

Answer 2

Thanks to you I was able to make my own locale in Angular work. And I think I have found the solution to your problem at the same time.

Try to put registerLocaleData() inside of the AppComponent constructor, instead of trying to implement NgOnInit

Hope it will help