ProjectName in menu is not updated by localization #9858

7 Answer(s)

• 

  0

  AI-Bot created 20 days ago

  Support Team ABP Agent

  To localize the application name in the LeptonX Angular menu, updating the Texts->AppName value in your server-side en.json will 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.ts file or directly in the LeptonX theme configuration.

  To override the menu brand name without modifying the entire brand component, follow these steps:

  1. Open your Angular project.
  2. Locate the src/environments/environment.ts file.
  3. Find or add the application property. For example:

  export const environment = {
       // ... other settings
       application: {
         name: 'Test123' // Set your desired app name here
       }
     };
  

  4. 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:

  • ABP Angular Localization
  • ABP Localization Fundamentals

  ---

  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.

  Save Cancel
• 

  0

  agilenova created 20 days ago

  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.

  Save Cancel
• 

  0

  agilenova created 20 days ago

  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.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 17 days ago

  Support Team Angular Expert

  Hello,

  The latest version of the ABP templates are migrated to use the standalone structure as explained here in this guide https://abp.io/docs/9.3/release-info/migration-guides/abp-9-3#angular-ui-migrating-npm-packages-to-standalone-structure If you do not want to switch, you can add standalone: false flag for your default structure. However, newly generated projects will be standalone.

  Alternatively, we have added a provider for the logo. https://github.com/abpframework/abp/pull/23111 It basically uses the configuration provided in the environment

  const baseUrl = 'http://localhost:4200';
  export const environment = {
  	//...
    application: {
      baseUrl,
      name: 'MyProjectName', //changes the display name
      logoUrl: '', //sets the icon url
    },
    //...
  } as Environment;
  

  You can let us know if you need further assistance. Thank you for your cooperation.

  Save Cancel
• 

  0

  agilenova created 13 days ago

  The migratrion guide https://abp.io/docs/9.3/release-info/migration-guides/abp-9-3#angular-ui-migrating-npm-packages-to-standalone-structure does not provide detailed instructions for standalone. The guide says: "For detailed migration steps and best practices, please refer to our upcoming documentation and/or blog post."

  Do you know when the blog post will be avaiilable?

  Thank you, however, for the alternatives. I will try standalone: false for now.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 8 days ago

  Support Team Angular Expert

  Hello again,

  You can get a reference from this post: https://abp.io/community/articles/abp-now-supports-angular-standalone-applications-zzi2rr2z#gsc.tab=0

  You could also check the official documentation of Angular: https://angular.dev/reference/migrations/standalone

  Let us know if you need further assistance. Thank you for your cooperation.

  Save Cancel
• 

  0

  agilenova created 8 days ago

  Thank you for the post and references. The issue is resolved.

  Save Cancel

  1