Hello,
Both templates are designed to support a modular structure.
I would like to know if it's possible to generate an Angular frontend in a microservice-based ABP project. If yes, could you please guide me on how to achieve this?
Yes, it is possible to generate an Angular frontend within a microservice-based ABP project. If you're unsure which template best fits your needs, I recommend reviewing the relevant documentation below:
Solution Template Guide: https://abp.io/docs/latest/solution-templates/guide
Microservice Tutorial: https://abp.io/docs/latest/tutorials/microservice?UI=NG&DB=EF
DDD Tutorial: https://abp.io/docs/latest/tutorials/modular-crm
Please feel free to reach out if you need further assistance.
Hello again,
I assume you're using the old CLI for this task. If that's the case, I'm encountering the same issues on my end, and we'll be looking into them. In the meantime, I recommend switching to the new CLI. You can find more information about the differences between the old and new versions here: https://abp.io/docs/latest/cli/differences-between-old-and-new-cli
Additionally, if you'd like to use the Lepton theme, make sure you have the following packages installed:
"@volo/abp.ng.theme.lepton": "~9.2.2",
"@volosoft/abp.ng.theme.lepton-x": "~4.2.1",
For more information on configuring themes, check out this guide: https://abp.io/docs/latest/framework/ui/angular/theme-configurations
Hello, thank you for providing necessary and extra information regarding your problem. I checked your project, however I could not see the module.
!-- removed picture --!
Regardless of the module, I can suggest you to discard proxy paths. Here is how paths are generated within the latest version of ABP studio:
// angular/tsconfig.json
{
...
"paths": {
"@angular/*": ["node_modules/@angular/*"],
"@abp/*": ["node_modules/@abp/*"],
"@volo/*": ["node_modules/@volo/*"],
"@volosoft/*": ["node_modules/@volosoft/*"],
"@swimlane/*": ["node_modules/@swimlane/*"],
"@ngx-validate/core": ["node_modules/@ngx-validate/core"],
"@ng-bootstrap/ng-bootstrap": ["node_modules/@ng-bootstrap/ng-bootstrap"],
"@book-store": ["../modules/bookstore/angular/projects/book-store/src/public-api.ts"],
"@book-store/config": [
"../modules/bookstore/angular/projects/book-store/config/src/public-api.ts"
]
},
...
}
You can directly use the relative path as follows:
import type { BookStoreEntityOneDto } from '../../../proxy/book-store-entity-ones/models';
import { BookStoreEntityOneService } from '../../../proxy/book-store-entity-ones/book-store-entity-one.service';
export abstract class AbstractBookStoreEntityOneDetailViewService {
// ...
}
You can let me know if you need further assistance. Thank you for your cooperation.
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