Angular: Error in Console in User Management List view and not rendered date values

[OmarHawk]

Overview of the issue

When viewing the List view of User Management in a freshly generated application (where there is a Created / Modified date), we do get an error in console:

ERROR Error: NG02100: InvalidPipeArgument: 'NG0701: Missing locale data for the locale "de".' for pipe 'DatePipe'
at invalidPipeArgumentError (common.mjs:4021:12)
at DatePipe.transform (common.mjs:4485:19)
at pureFunction2Internal (core.mjs:27550:65)
at Module.ɵɵpipeBind2 (core.mjs:27771:9)
at UserManagementComponent_Conditional_31_Conditional_69_For_4_Template (user-management.component.html:80:21)
at executeTemplate (core.mjs:12158:9)
at refreshView (core.mjs:13390:13)
at detectChangesInView (core.mjs:13615:9)
at detectChangesInViewIfAttached (core.mjs:13578:5)
at detectChangesInEmbeddedViews (core.mjs:13535:13)

And no date values are being shown.

Motivation for or Use Case

Should not produce errors in console in a freshly generated application.

Reproduce the error

1. Generate Application according to below's information.
2. Sign in as admin
3. Go to User management while having the Debug Console open

Related issues

Suggest a Fix

We found out, that when we add our additional "de" Locale to app.components initialization like the following, it does work, i.e. error goes away and date rendering works. I do wonder, if this is the right approach? (and therefore may be put into a Pull Request here)

...

...
import { registerLocaleData } from '@angular/common';
import locale from '@angular/common/locales/en';
import localeDE from '@angular/common/locales/de';
import dayjs from 'dayjs/esm';
...

@Component({
  selector: 'jhi-app',
  standalone: true,
  template: '<jhi-main></jhi-main>',
  imports: [
    MainComponent,
    // jhipster-needle-angular-add-module JHipster will add new module here
  ],
})
export default class AppComponent {
  constructor(applicationConfigService: ApplicationConfigService, iconLibrary: FaIconLibrary, dpConfig: NgbDatepickerConfig) {
...
    registerLocaleData(locale);
    registerLocaleData(localeDE);
    iconLibrary.addIcons(...fontAwesomeIcons);
...
  }
}

JHipster Version(s)

8.1.0

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "applicationType": "monolith",
    "authenticationType": "session",
    "baseName": "dataview",
    "buildTool": "maven",
    "cacheProvider": "no",
    "clientFramework": "angular",
    "clientTestFrameworks": [],
    "clientTheme": "none",
    "creationTimestamp": 1703167177287,
    "databaseType": "sql",
    "devDatabaseType": "mysql",
    "devServerPort": 4200,
    "enableGradleEnterprise": null,
    "enableHibernateCache": false,
    "enableSwaggerCodegen": false,
    "enableTranslation": true,
    "entities": [],
    "feignClient": false,
    "gradleEnterpriseHost": null,
    "jhipsterVersion": "8.1.0",
    "languages": [
      "de",
      "en"
    ],
    "messageBroker": false,
    "microfrontend": null,
    "microfrontends": [],
    "nativeLanguage": "de",
    "packageName": "de.markant.dataview",
    "prodDatabaseType": "mysql",
    "reactive": false,
    "searchEngine": "elasticsearch",
    "serverPort": null,
    "serverSideOptions": [
      "searchEngine:elasticsearch"
    ],
    "serviceDiscoveryType": false,
    "testFrameworks": [],
    "websocket": false,
    "withAdminUi": true
  }
}

Environment and Tools

openjdk version "17.0.7" 2023-04-18 LTS
OpenJDK Runtime Environment (Red_Hat-17.0.7.0+7-1) (build 17.0.7+7-LTS)
OpenJDK 64-Bit Server VM (Red_Hat-17.0.7.0+7-1) (build 17.0.7+7-LTS, mixed mode, sharing)

git version 2.43.0.windows.1

node: v18.19.0
npm: 10.2.3

Docker version 24.0.2-rd, build e63f5fa

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Browsers and Operating System

Windows 10

• Checking this box is mandatory (this is just to show you read everything)

[github-actions]

JHipster has completed the sample check
.yo-rc.json: valid
Entities JDL: blank
Application: successfully generated
Frontend check: success
Backend check: success
E2E check: success

This check uses jhipster info output from the issue description to generate the sample.
Bug report that does not contain this information will be marked as invalid.

[mshima]

The steps looks a bit odd.
Angular locale is fixed to the native language.

Since the reproduction sample uses de as native language, it should not import and register en.

generator-jhipster/generators/angular/templates/src/main/webapp/app/app.component.ts.ejs

Line 27 in 985f62c

import locale from '@angular/common/locales/<%= angularLocaleId %>';

generator-jhipster/generators/angular/templates/src/main/webapp/app/app.config.ts.ejs

Line 67 in 985f62c

{ provide: LOCALE_ID, useValue: '<%= angularLocaleId %>' },

[mshima]

The ANGULAR_ID may be missing the country like de-DE.

[OmarHawk]

The steps looks a bit odd.

Indeed odd, but just to be extra sure (as I have plenty of tests projects lying around and I wasn't 100% anymore :P), I regenerated another project with the exact same config (clicking through the questions in the wizard where German is automatically suggested as default, as this is my local Locale I guess)

and then I received this kind of app.component.ts

Interestingly, only the generated import in app.component.ts is wrong:

import locale from '@angular/common/locales/en';

the value in the generated app.config.ts looks alright:

    { provide: LOCALE_ID, useValue: 'de' },

[mshima]

Fixed by #24630