Thank you for providing extra details, however I cannot produce the same problem on my end.
Hello,
Thank you for the details. The peer dependency warnings occur because some libraries (like @ng-bootstrap/ng-bootstrap and angularx-qrcode) declare compatibility with older Angular versions, while your project uses Angular ~19.1.0.
These warnings are expected and will be resolved in an upcoming patch where you can check from https://github.com/abpframework/abp/releases
A refund for your ticket is being processed — thanks for your cooperation.
Hi again! Thanks for providing the additional details.
From the error trace, it looks like there’s a configuration issue causing the layoutStyles is not iterable error. To resolve this, please try the following steps:
SideMenuLayoutModule.forRoot() or TopMenuLayoutModule.forRoot(), depending on the layout you’re using.importProvidersFrom(
SideMenuLayoutModule.forRoot()
// or
TopMenuLayoutModule.forRoot()
);
provideAbpThemeShared() to your providers array to properly initialize the shared theme configuration.providers: [
provideAbpThemeShared(),
]
provideAbpCore(
withOptions({
environment,
registerLocaleFn: registerLocale(),
})
),
Hello again! Thanks for reaching out and continuing to explore the modular setup.
The issue you're encountering is related to the paths configuration in your tsconfig.json. In recent ABP modular monolith setups, alias resolution—like @proxy—depends entirely on how these paths are configured.
Could you please share the relevant portion of the paths property from your tsconfig.json (or tsconfig.base.json, if you're using a workspace configuration)? This will help us verify if the alias is correctly mapped to the generated proxy folder.
Looking forward to your response—thanks for your continued collaboration!
I couldn’t reproduce the issue on my end. Could you please confirm whether the problem still persists? If so, kindly share additional details such as the ABP version you're using, your operating system, and the browser in question. If possible, you can also share a reproducible example of your project by emailing it to sumeyye.kurtulus@volosoft.com so we can investigate further.
Hello, I understand the issue can be frustrating. I'm still unable to replicate the problem on my side. For reference, I generated the application using the App (layered) template in the latest version of ABP Studio.
In the meantime, I recommend updating the style bundle configuration in your angular.json file as shown below. Ensure the inject property is set to true for proper inclusion during build:
"styles": [
...
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css",
"inject": true,
"bundleName": "layout-bundle"
},
{
"input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css",
"inject": true,
"bundleName": "layout-bundle.rtl"
}
...
],
Let me know if the issue still occurs after making this change.
You are right. However, these components should not break the functionality even if you migrate your application to a standalone structure. You can also refer to this project sample: https://drive.google.com/file/d/1mZN3B14JMsPf-WH_nQIpRVFgnxOvA46B/view?usp=drive_link
Let us know if it meets your requirement.
Hello Gabriel,
Thank you for your patience and for reaching out.
What’s the correct way to generate Angular proxies inside module folders?
To ensure proxies are generated in the correct module folder, you can use the Angular-specific proxy generation command with these flags and parameters:
abp generate-proxy -t ng -m <module-name> -u <api-definition-url> --target <angular-project-name>
For further details on Angular proxy generation via the ABP CLI, you can refer to the official documentation: ABP CLI - Generate Proxy. Let us know if you still face issues with the proxy generation.
Is there any official documentation on using Angular in a modular monolith setup?
The official documentation for Angular integration in a modular monolith is currently being updated. It will be available the upcoming release.
Hello, apologies for the delayed response.
We created a startup template (layered with Angular) and we noticed there is a delay in loading CSS, and it takes too much time How can we avoid this delay?
I couldn’t reproduce the issue on my end. Could you please confirm whether the problem still persists? If so, kindly share additional details such as the ABP version you're using, your operating system, and the browser in question. If possible, you can also share a reproducible example of your project by emailing it to sumeyye.kurtulus@volosoft.com so we can investigate further.
Also, are there any documents that describe how to change the login page to be in Angular instead of redirecting to the backend?
Yes, you can implement a fully client-side login using the Resource Owner Password Flow. You’ll find more details in the official documentation here: https://abp.io/docs/latest/framework/ui/angular/account-module
Thank you for sharing the additional details. After reviewing your project and running a few tests, it appears that the issue stems from redundant query parameters in the URL. As a temporary workaround, we recommend sanitizing the URL before passing it to Angular’s router or any relevant authentication service.
In the meantime, you can try implementing the following provider-based approach to handle this. Please let us know if this resolves the issue on your end while we continue investigating and work toward a permanent fix.
// url-sanitizer.ts
import { provideAppInitializer } from '@angular/core';
export const SANITIZE_URL = [
provideAppInitializer(() => {
sanitizeStartupUrl();
}),
];
export function sanitizeStartupUrl() {
const currentUrl = window.location.href;
if (currentUrl.endsWith('?&&')) {
const cleanUrl = window.location.origin + window.location.pathname;
window.location.replace(cleanUrl);
}
}
// app.module.ts
@NgModule({
providers: [
...
SANITIZE_URL,
],
bootstrap: [AppComponent],
})
export class AppModule {}
Sure, I forgot sharing my address. You can email me via sumeyye.kurtulus@volosoft.com
