The project name in the lepton-x left menu appears to be a constant, not affected by the Texts->AppName setting in the server's en.json file. If I create project called "Test" and chnage the en.json to "Test123", I see "Test123" in the browser title bar, but I still see "Test" in the lepton-x menu adjacent to the logo. I am using the angular front-end.
Shouldn't the localization file override the menu title? I believe the localization setting worked in past versions as I just started having this issue in 9.3.x. I can reproduce the issue in a new project as well.
If the localization file no longer works, is there a way to override the name, hopefully without overriding the entire brand component?
Thanks!
Sample Test Project:
- Template: app
- Created ABP Studio Version: 1.2.2
- Current ABP Studio Version: 1.2.2
- Tiered: No
- Multi-Tenancy: Yes
- UI Framework: angular
- Theme: leptonx
- Theme Style: system
- Theme Menu Placement: side
- Run Install Libs: Yes
- Progressive Web App: No
- Run Progressive Web App Support: No
- Database Provider: ef
- Database Management System: sqlite
- Separate Tenant Schema: No
- Create Initial Migration: Yes
- Run Db Migrator: Yes
- Mobile Framework: none
- Public Website: No
- Social Login: No
- Include Tests: Yes
- Kubernetes Configuration: No
- Distributed Event Bus: none
- Use Local References: No
- Optional Modules:
- GDPR
- FileManagement
- TextTemplateManagement
- LanguageManagement
- AuditLogging
- OpenIddictAdmin
- Selected Languages: English, Arabic, Chinese (Simplified), Chinese (Traditional), Czech, English (United Kingdom), Finnish, French, German (Germany), Hindi , Hungarian, Icelandic, Italian, Portuguese (Brazil), Romanian (Romania), Russian, Slovak, Spanish, Swedish, Turkish
- Default Language: English
- Create Command: abp new Test -t app --ui-framework angular --database-provider ef --database-management-system sqlite --theme leptonx --without-cms-kit --dont-run-bundling --no-social-logins -file-management
- Exception message and full stack trace: n/a
- Steps to reproduce the issue:
- Create a new ABP solution with Angular and LeptonX (commercial) i.e. "Test"
- Edit the Test.Domain.Shared/Localization/Text/en.json: Texts->AppName to set to "Test123"
- Start the application and observe the name remains "Test" in the lpx menu.
3 Answer(s)
-
0
To localize the application name in the LeptonX Angular menu, updating the
Texts->AppNamevalue in your server-sideen.jsonwill affect the browser title, but the menu brand name is handled separately in the Angular front-end.In LeptonX Angular, the brand name shown in the sidebar is not automatically bound to the server-side localization resource. Instead, it is set in the Angular project, typically in the
environment.tsfile or directly in the LeptonX theme configuration.To override the menu brand name without modifying the entire brand component, follow these steps:
- Open your Angular project.
- Locate the
src/environments/environment.tsfile. - Find or add the
applicationproperty. For example:
export const environment = { // ... other settings application: { name: 'Test123' // Set your desired app name here } };- Save the file and restart your Angular application.
This will update the brand name in the LeptonX sidebar menu. If you want to support localization for the brand name, you can use Angular's i18n or ngx-translate in your custom brand component, but by default, the LeptonX theme uses the static value from the environment configuration.
Sources:
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.
-
0
The AI response (editing environment.ts) works for a new 9.3.2 project but it does not work for an upgraded project from ABP 9.2.x. I have two, upgraded projects (from 9.1.x and 9.2.x) that are exhibiting this issue. Other than upgrading the node and Angular versions, I didn't see any migration notes which might explain this behavior. Any guidance is appreciated.
-
0
I noticed a difference between my older/upgraded applications and the newly generated application in main.ts.
Old: platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
New: bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
After modifying my old application to use bootstrapApplication, the ProjectName is now updating properly.
It is my understanding that this Angular change is optional (to migrate to standalone components) but it seems to be required for an ABP upgrade to 9.3. Is this change required during migration for an older application to work in 9.3 / Angular 20? Is there a way to get the "ProjectName" to appear correctly using bootstrapModule?
Thank you for any guidance.
