Localize extension property in Angular doesn't match documentation

[antonGritsenko]

Is there an existing issue for this?

• [X] I have searched the existing issues

Description

The localization of the extension property seems broken or documentation is not up to date.

Reproduction Steps

Based on https://docs.abp.io/en/abp/latest/Module-Entity-Extensions#display-name

1. Generate new solution using latest version 8.1.1, call it SimpleTemplate, use angular as UI
2. Change SimpleTemplateModuleExtensionConfigurator.cs to following (just uncomment sample code):

 private static void ConfigureExtraProperties()
 {
     ObjectExtensionManager.Instance.Modules()
          .ConfigureIdentity(identity =>
          {
              identity.ConfigureUser(user =>
              {
                  user.AddOrUpdateProperty<string>( //property type: string
                      "SocialSecurityNumber", //property name
                      property =>
                      {
                          //validation rules
                          property.Attributes.Add(new RequiredAttribute());
                          property.Attributes.Add(new StringLengthAttribute(64) { MinimumLength = 4 });

                          property.Configuration[IdentityModuleExtensionConsts.ConfigurationNames.AllowUserToEdit] = true;

                          //...other configurations for this property
                      }
                  );
              });
          });
 }

3. Change aspnet-core\src\Angr.SimpleTemplate.Domain.Shared\Localization\SimpleTemplate\en.json to

{
  "culture": "en",
  "texts": {
    "Menu:Home": "Home",
    "Welcome": "Welcome",
    "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
    "SocialSecurityNumber": "SSN",
     "DisplayName:SocialSecurityNumber": "SSN wit DisplayName",
      "SSNCustomKey": "SSN with custom key"
  }
}

Rune the app, open the edit user form: NOK, still SocialSecurityNumber 4. Change SimpleTemplateModuleExtensionConfigurator.cs to

ObjectExtensionManager.Instance.Modules()
     .ConfigureIdentity(identity =>
     {
         identity.ConfigureUser(user =>
         {
             user.AddOrUpdateProperty<string>( //property type: string
                 "SocialSecurityNumber", //property name
                 property =>
                 {
                     //validation rules
                     property.Attributes.Add(new RequiredAttribute());
                     property.Attributes.Add(new StringLengthAttribute(64) { MinimumLength = 4 });
                     property.DisplayName = new FixedLocalizableString("Social security no");
                     property.Configuration[IdentityModuleExtensionConsts.ConfigurationNames.AllowUserToEdit] = true;

                     //...other configurations for this property
                 }
             );
         });
     });

Run the app: OK 5. Change SimpleTemplateModuleExtensionConfigurator.cs to

ObjectExtensionManager.Instance.Modules()
     .ConfigureIdentity(identity =>
     {
         identity.ConfigureUser(user =>
         {
             user.AddOrUpdateProperty<string>( //property type: string
                 "SocialSecurityNumber", //property name
                 property =>
                 {
                     //validation rules
                     property.Attributes.Add(new RequiredAttribute());
                     property.Attributes.Add(new StringLengthAttribute(64) { MinimumLength = 4 });
                      property.DisplayName = LocalizableString.Create<SimpleTemplateResource>("SSNCustomKey");
                     property.Configuration[IdentityModuleExtensionConsts.ConfigurationNames.AllowUserToEdit] = true;

                     //...other configurations for this property
                 }
             );
         });
     });

Execute the app: NOK, now display name of the property changed to SSNCustomKey

6. Change SimpleTemplateModuleExtensionConfigurator.cs to

ObjectExtensionManager.Instance.Modules()
     .ConfigureIdentity(identity =>
     {
         identity.ConfigureUser(user =>
         {
             user.AddOrUpdateProperty<string>( //property type: string
                 "SocialSecurityNumber", //property name
                 property =>
                 {
                     //validation rules
                     property.Attributes.Add(new RequiredAttribute());
                     property.Attributes.Add(new StringLengthAttribute(64) { MinimumLength = 4 });
                      property.DisplayName = LocalizableString.Create<SimpleTemplateResource>("::SSNCustomKey");
                     property.Configuration[IdentityModuleExtensionConsts.ConfigurationNames.AllowUserToEdit] = true;

                     //...other configurations for this property
                 }
             );
         });
     });

Execute the app: OK, now display name of the property changed to "SSN with custom key"

Expected behavior

Localization still works

Actual behavior

Localization doesn't work as documented, moreover, the behavior changed from the prev versions.

Regression?

Yes, it works in v6 with "DisplayName:SocialSecurityNumber"

Known Workarounds

No response

Version

8.1.1

User Interface

Angular

Database Provider

EF Core (Default)

Tiered or separate authentication server

Tiered

Operation System

Windows (Default)

Other information

I believe this is kind bug in the Angular, because my own app and app created from the template just flooded with warnings like this (I have 27 in just create app from the template):

The localization source separator (::) not found.