Localization of Home Component does not work in Angular #9490

MichelZ created 21 days ago

We are currently using ABP 9.2.0 with the Lepton Theme, Angular. At some point probably during one of the last version updates (maybe 9.1.3?) it seems that our Homepage lost it's localizations. Just the Homepage though (the one with the "LongWelcomeMessage" localization) - all other pages are fine. We're not aware of any changes from our side specifically to the Home Component, and we have no idea where to start looking for the error.

We rarely look at this page, I noticed it on the Update from 9.2.0, but we're also seeing it in an environment that still has 9.1.3... There are no errors on the console, however we find these warnings: The localization source separator (::) not found.

Go to accepted answer

AI-Bot created 21 days ago

Support Team ABP Agent

The warning The localization source separator (::) not found. and the display of LongWelcomeMessage as a literal string indicate that the Angular localization key is not being resolved. This usually means the resource or key is not registered or loaded correctly in your Angular app.
In ABP Angular, localization keys must be referenced as ResourceName::Key. For example:
```
{{ 'MyProjectName::LongWelcomeMessage' | abpLocalization }}
```

You must also ensure that the resource and key are registered in your Angular module. In your app.module.ts, you should have something like:

import { provideAbpCore, withOptions } from '@abp/ng.core';

@NgModule({
  providers: [
    provideAbpCore(
      withOptions({
        localizations: [
          {
            culture: 'en',
            resources: [
              {
                resourceName: 'MyProjectName',
                texts: {
                  "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information visit"
                }
              }
            ]
          }
        ]
      }),
    ),
  ],
})
export class AppModule {}

If you only use backend localization, ensure the backend returns the correct resource and key, and that the Angular app is configured to use it.
Double-check that the resource name and key match exactly, and that you are using the correct separator (::).
If you recently upgraded, compare your app.module.ts and localization configuration with a fresh ABP template for your version, as breaking changes or template changes may have occurred.
For more details, see the official documentation:
- ABP Angular Localization

This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.