Unfortunately, you cannot modify the specific tab in this way. However, I can suggest you two other ways to consider:
// ...
import { SettingTabsService } from '@abp/ng.setting-management/config';
@Component({
selector: 'app-root',
template: `
<abp-loader-bar></abp-loader-bar>
<abp-dynamic-layout></abp-dynamic-layout>
<abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
`,
})
export class AppComponent {
private settingTabs = inject(SettingTabsService);
constructor() {
// 1. You can consider adding a new tab
// this.settingTabs.add([
// {
// name: 'MySettings',
// order: 1,
// component: MySettings,
// },
// ]);
// 2. Or patch an existing tab
this.settingTabs.patch('AbpIdentity::Menu:IdentityManagement', {
name: 'MySettings',
order: 1,
component: MySettings,
});
}
}
Node version: 22.17.0 Yarn version: 4.9.2 Npm version 10.9.2
There is no problem regarding version incompatibility. As I mentioned, the project you sent works when you add the related import since it is used in the app module. Could there be something you customized other than the default generated template?
Why did you create the template with references?
Including references like InternetConnectionStatusComponent ensures essential functionality—such as monitoring internet connectivity—is available out of the box. It promotes reusability and improves user experience, but can be removed if not needed.
Hello,
You may obtain the source code via ABP Suite, as outlined in the official documentation:
https://abp.io/docs/latest/suite/source-code
If your work involves configuration or settings, the Setting Management module may also be of interest.
Alternatively, to access the source code and replace the current identity package integration for customization purposes, you may execute the following command:
abp add-package @volo/abp.ng.identity --with-source-code
You need to run this command within your Angular project directory. This will include the package along with its source code in your project. Once added, you can refer to the IdentitySettingsComponent for any necessary modifications.
If you need any further assistance, please do not hesitate to reach out.
Hello,
Adding the missing import should resolve the issue. Could you please try deleting all temporary files and folders—such as .nx, .angular, node_modules, tmp, dist, yarn.lock, etc.—and then reinstall dependencies by running yarn again?
Other than that, I did not notice any issues in the project you shared—it appears to be working as expected.
In the meantime, could you also share the versions of Node and Yarn you are using?
Hello again, I sent you an e-mail.
Hello, and thank you for providing additional details about your issue. I recommend accessing the source code by running the following command:
abp add-package @volo/abp.commercial.ng.ui --with-source-code
This will allow you to review the BackToImpersonatorNavItemComponent and ImpersonationService, which contain the relevant functionality logic.
You can let us know if you need any further assistance.
Could you provide an e-mail address, so that I can share the folder? Here is my address: sumeyye.kurtulus@volosoft.com
I see that this import is missing for InternetConnectionStatusComponent, you will need to add this import to your app.module.ts
import {
InternetConnectionStatusComponent,
} from '@abp/ng.theme.shared';
I have granted you the permission. I will also be checking your sample and get back to you as soon as possible. Thank you for your cooperation.
Hello! Thank you for sharing more details about your issue.
It looks like execa might not be installed correctly.
You can check if it is available by running:
node --eval "console.log(await import.meta.resolve('execa'))" --input-type=module
Alternatively, you can look for execa in the angular/.suite/schematics/package-lock.json file.
If it is not installed, try running npm install inside the angular/.suite/schematics directory.
If the issue persists, I can send you a working .suite file. Feel free to let me know if you would like that or need further help!