How to Replace abp Prefix in Endpoints and Bundle Names #9830

9 Answer(s)

• 

  0

  AI-Bot created 4 days ago

  Support Team ABP Agent

  1. To change the built-in ABP API route prefix (such as /api/abp/application-configuration and /api/abp/application-localization), ABP does not provide a global, officially supported way to rename all built-in endpoints’ prefixes (like "abp") out-of-the-box. These endpoints are hardcoded in the ABP modules and are used by the Angular UI and ABP’s internal mechanisms. Overriding them would require forking the relevant ABP modules and updating all usages, which is not recommended as it will break compatibility with future ABP updates and may cause issues with the Angular UI, which expects these endpoints.

  2. To change the generated CSS bundle name (e.g., abp-bundle.css), you can customize the bundle name using ABP’s bundling system. In your module’s ConfigureServices method, configure the AbpBundlingOptions and set your desired bundle name:

  Configure<AbpBundlingOptions>(options =>
  {
      options.StyleBundles.Configure(
          StandardBundles.Styles.Global,
          bundleConfiguration =>
          {
              bundleConfiguration.FileName = "company-bundle.css"; // Set your custom bundle name here
          }
      );
  });
  

  Reference:

  • User Interface Customization Guide
  • Bundling & Minification: Bundle Contributors

  3. For static files and headers, you can override or customize most static assets and headers by using ABP’s bundling and theming system, as shown above. However, for built-in API endpoints, there is no officially supported, update-safe way to globally replace "abp" in all routes and headers. Attempting to do so would require deep customization and is not recommended for long-term maintainability.

  Summary:

  • You can change bundle/static file names using AbpBundlingOptions.
  • You cannot globally and safely change the "abp" prefix in all built-in API endpoints without forking ABP modules, which is not recommended.
  • For white-labeling and branding, focus on customizing UI, static files, and visible assets, but accept that some internal endpoints will retain the "abp" prefix for compatibility.

  Sources:

  • User Interface Customization Guide
  • Bundling & Minification: Bundle Contributors
  • White Labeling in ABP
  • Global Assets in ABP

  ---

  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

  NH-Support created 4 days ago

  Not fixing

  Save Cancel
• 

  0

  maliming created 4 days ago

  Support Team Fullstack Developer

  hi

  You can try to override the Angular services to replace the URL.

  

  For the backend: Replace controllers.

  https://abp.io/docs/latest/framework/api-development/auto-controllers#replace-or-remove-controllers

  

  Save Cancel
• 

  0

  NH-Support created 3 days ago

  Thank you for reply How to override the Angular services to replace the URL? I couldn't find it within the documentation

  Save Cancel
• 

  0

  maliming created 3 days ago

  Support Team Fullstack Developer

  hi

  I will ask our Angular team.

  Thanks.

  Save Cancel
• 

  0

  NH-Support created 3 days ago

  Ok waiting the Angular team also inside the services file I didn't find the Url for replace for example this is the AbpApiDefinitionService:

  Save Cancel
• 

  0

  sumeyye.kurtulus created 3 days ago

  Support Team Angular Expert

  Hello,

  You can follow these steps to replace the related bundles

  First, create your custom CSS files

  • src/assets/my-bundle.css

  • src/assets/my-bundle.rtl.css

    You can copy the content from the abp-bundle.css, abp.bundle.rt.css. You can also give a direct reference inside as @import url('abp-bundle.css'); and @import url('abp-bundle.rtl.css');

  ---

  Then, ensure the files are served from the site root. Add this to angular.json → build.options.assets

    {
      "glob": "my-bundle*.css",
      "input": "src/assets",
      "output": "."
    }
  

  ---

  Lastly, you need to tell the theme to use your bundle instead. In your app config (where you call provideThemeLeptonX):

     import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
      // ...
      provideThemeLeptonX(
        withThemeLeptonXOptions({
          styleFactory: (styles) => {
            return [
              ...styles.filter(s => s.bundleName !== 'abp-bundle'),
              { bundleName: 'my-bundle' }, // loads /my-bundle.css (and .rtl.css)
            ];
          },
        }),
      );
  

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

  Save Cancel
• 

  0

  NH-Support created 3 days ago

  Thank you for support

  1- for bundle files I follow the steps but get some issue :

  @volosoft/ngx-lepton-x.abp I try to download this package separatly but return not found error

  I try to use @volosoft/abp.ng.theme.lepton-x but provideThemeLeptonX, withThemeLeptonXOptions not defiend within it

  2- for call abp end points I didn't find a solution to replace abp controller call from angular

  Save Cancel

  1
• 

  0

  sumeyye.kurtulus created 3 days ago

  Support Team Angular Expert

  I assumed that you were using the latest version. Could you try this instead?

  // app.module.ts
   ThemeLeptonXModule.forRoot({
    styleFactory: styles => {
        const filtered = styles.filter(s => s.bundleName !== 'abp-bundle');
        filtered.push({ bundleName: 'my-bundle' }); // ← Matches your filename
        return filtered;
    },
  }),
  

  2- for call abp end points I didn't find a solution to replace abp controller call from angular

  I may not fully understand what you meant here, but this document might be helpful https://abp.io/docs/latest/framework/ui/angular/environment

  Save Cancel