Open Closed

Angular: How to use custom page tab settings in npm package migration 2.9.0 to 3.0.5? #366


User avatar
0
murat.kebabci created

Hi,

I am upgrading my npm package v2.9.0 to v3.0.5. I created custum settings page in service page.

addSettingTab({
  component: MySettingsComponents,
  name: 'SettingsMenu',
  order: 1
});

How can I use settings tab in my npm package? Custom page link

Old and new version is not working. Which page should use this module?

this.settingTabs.add([
      {
        component: MySettingsComponents,
        name: 'MySettingsComponents',
        order: 1,
      },
]);

12 Answer(s)
  • User Avatar
    -1
    liangshiwei created
    Support Team Fullstack Developer

    Are you using Angualr UI? Please see https://docs.abp.io/en/abp/latest/UI/Angular/Migration-Guide-v3.

  • User Avatar
    0
    murat.kebabci created

    Yes Angular UI but not contains my problem. I need how to use settings tab in npm package (for example your setting-management npm package)? Not dev app.

  • User Avatar
    0
    Mehmet created

    Hi @murat.kebabci

    Your dev-app must include the @abp/ng.setting-management package.

    How to install this package?
    1. Run the following command to install NPM package:
    yarn add @abp/ng.setting-management --tilde
    
    1. Import SettingManagementConfigModule to app.module.ts as shown below:
    import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
    
    @NgModule({
      imports: [
        // ...
        SettingManagementConfigModule.forRoot(),
      ],
    })
    export class AppModule {}
    
    1. Add following path to app-routing.module.ts:
    const routes: Routes = [
      //...
      {
        path: 'setting-management',
        loadChildren: () =>
          import('@abp/ng.setting-management').then((m) => m.SettingManagementModule.forLazy()),
      },
    ];
    // ...
    

    Then you will access the setting-management page like below link:

    http://localhost:4200/setting-management

    If you cannot see the Setting Management navigation link on the menu, please check setting management page policy or make sure a custum setting page is registered.

    Please let me know if your issue is resolved.

  • User Avatar
    0
    murat.kebabci created

    Hi Mehmet,

    Thank you for your answer. But I want to know how to add new tab of Setting Management page from npm package.

    I used to use below block in service page.

    addSettingTab({ component: MySettingsComponents, name: 'SettingsMenu', order: 1 });

  • User Avatar
    0
    Mehmet created

    Which template you are using, module or app-pro?

  • User Avatar
    0
    murat.kebabci created

    Module

  • User Avatar
    0
    murat.kebabci created

    ?

  • User Avatar
    0
    Mehmet created

    Do you have route.provider.ts or your-module-name-config.service?

  • User Avatar
    0
    murat.kebabci created

    Yes. There is my menu but no settings tab. Below block is not working.

    export class MyModuleConfigService {
    constructor(
        private restService: RestService,
        private settingTabs: SettingTabsService
      ) {
        this.settingTabs.add([
          {
            component: MyModuleSettingsComponent,
            name: MyModuleSettingsName,
            order: 3,
          },
        ]);
      }
    
      getSettings(): Observable<void> {
        return this.restService.request<void, void>({
          method: 'GET',
          url: '/api/MyModuleConfig/Settings',
        });
      }
    }
    
  • User Avatar
    0
    Mehmet created
    1. You have to create a provider named setting-tab.provider.ts near to your-module-config.module.

    You can create a folder named providers in the same folder as YourPackageConfigModule.

    1. Fill the content of the new provider file like below:
    import { SettingTabsService } from '@abp/ng.core';
    import { APP_INITIALIZER } from '@angular/core';
    import { YourSettingsComponent } from '../components/your-settings.component';
    
    export const YOUR_MODULE_NAME_SETTING_TAB_PROVIDER = [
      {
        provide: APP_INITIALIZER,
        useFactory: configureSettingTabs,
        deps: [SettingTabsService],
        multi: true,
      },
    ];
    
    export function configureSettingTabs(settingtabs: SettingTabsService) {
      return () => {
        settingtabs.add([
          {
            name: 'YourModuleName.YourSettings',
            order: 1,
            requiredPolicy: 'permission key here',
            component: YourSettingsComponent,
          },
        ]);
      };
    }
    
    1. Open the YourPackageConfigModule and add new provider to forRoot's providers array like below:
    import { YOUR_MODULE_NAME_SETTING_TAB_PROVIDER } from './providers/setting-tab.provider';
    
    @NgModule(/* module metadata */)
    export class YourPackageConfigModule {
      static forRoot(): ModuleWithProviders<YourPackageConfigModule> {
        return {
          ngModule: YourPackageConfigModule,
          providers: [YOUR_MODULE_NAME_SETTING_TAB_PROVIDER],
        };
      }
    }
    

    The YourPackageConfigModule must be imported to the AppModule with calling the forRoot method

    //app.module.ts
    
    //...
    imports: [
    //...
    YourPackageConfigModule.forRoot()
    ]
    // ...
    
  • User Avatar
    0
    pooja created

    Hii Mehmet,

    How can i add new tab under exisitng setting page as shown in below image.I want to add new tab as a custom setting on click of that want show my new component. I am using app-pro template.

  • User Avatar
    0
    Mehmet created

    Hi @pooja

    Please create a new ticket and ask your question in detail.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on June 20, 2025, 11:20