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

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?

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