Hello,
Thank you for giving details about the problem. However, I could not produce the same problem on both lepton and lepton-x themes. That would be the best if you could share the related dependencies in your package.json
Thank you again for checking and responding. Since then the styles are used in a correct way by the customStyle parameter, the problem should be resolved.
Speaking of APP_INITIALIZER, here is how we have managed these kind of migrations:
// Before
export const LEPTON_THEME_NAV_ITEM_PROVIDERS = [
{
provide: APP_INITIALIZER,
useFactory: configureNavItems,
deps: [NavItemsService],
multi: true,
},
];
export function configureNavItems(navItems: NavItemsService) {
return () => {
navItems.addItems([
// ...
]);
};
}
// After
export const LEPTON_THEME_NAV_ITEM_PROVIDERS = [
provideAppInitializer(() => {
configureNavItems();
}),
];
export function configureNavItems() {
const navItems = inject(NavItemsService);
// No need to return anything, since it is a modular function
navItems.addItems([
// ...
]);
}
You can also reach related 🔗 Angular documentation
It should be something misconfigured that affected this particular part as I suppose.
export const LEPTON_THEME_STYLES_PROVIDERS = [
provideAppInitializer(() => {
configureStyles();
}),
];
export function configureStyles() {
const injector = inject(Injector);
// ...
initLayouts(injector);
}
export function initLayouts(injector: Injector) {
const replaceableComponents = injector.get(ReplaceableComponentsService);
// we do not return this as we use provideAppInitializer instead of APP_INITIALIZER
replaceableComponents.add({
key: eThemeLeptonComponents.ApplicationLayout,
component: ApplicationLayoutComponent,
});
replaceableComponents.add({
key: eThemeLeptonComponents.AccountLayout,
component: AccountLayoutComponent,
});
replaceableComponents.add({
key: eThemeLeptonComponents.EmptyLayout,
component: EmptyLayoutComponent,
});
}
You can let us know if you need further assistance on this. Thank you for your cooperation.
Thank you again. This usage should also be working fine.
This problem shold not be related to the usage of APP_INITIALIZER since it is just depracated. That would be the best if you could share a minimal, reproducible example or a screenshot of how your application is broken (via e-mail if you do not want it to be seen here)
Thank you again for getting back and giving more details. The problem is probably related to the custom style parameter as I mentioned before. Do you provide the custom style css files in your styles.scss file as it is explained here?
You need to import your style like this @import 'your-custom-style.css'; .
Thank you for sharing details about your problem. It looks like the problem occurs for the customStyle input here:
ThemeLeptonModule.forRoot({
customStyle: true,
}),
The issue might be related to a style mismatch. Could you also provide how you managed this custom style and whether this style is loaded properly?
This trick is supposed to replace the empty layout and it does so. However, it is a forced solution as you say. So, if you could share how you provide the lepton theme in your app.module.ts or app.config.ts, I would be able to assist based on this.
Hello again,
Thank you for providing extra details. I am suspecting that the abp-application-layout is not initialized correctly. Do you see any error thrown somewhere like this
export function injectStyle(injector: Injector) {
const rendererFactory = injector.get(RendererFactory2);
const domInsertion = injector.get(DomInsertionService);
const _document = injector.get(DOCUMENT);
rendererFactory
.createRenderer(_document.body, null)
.addClass(_document.body, 'abp-application-layout');
const appStyles: HTMLElement = _document.querySelector('link[rel="stylesheet"][href*="styles"]');
let content: StyleContentStrategy;
if (appStyles) {
const domStrategy = DOM_STRATEGY.BeforeElement(appStyles);
content = new StyleContentStrategy(styles, domStrategy, undefined, {
id: LEPTON_STYLE_ELEMENT_ID,
});
} else {
content = CONTENT_STRATEGY.AppendStyleToHead(styles, { id: LEPTON_STYLE_ELEMENT_ID });
}
domInsertion.insertContent(content);
}
Hello,
Thank you for explaining your problem by giving details. Since you have migrated from 8.3.4 to 9.3.4 , I need to remind you that we have made some set of adjustments on our side. The most important one is the standalone migration.
You can check details from here
If you have also migrated your application to the new builder system, this could make a difference.
Thant is to say, the module and the token you have shared seem functional and not problematic. However, that would be the best if you could share
If you prefer, you could also share a minimal reproducible example via e-mail. Here is my address: sumeyye.kurtulus@volosoft.com
Thank you for your cooperation.
Hello again,
Thank you for giving extra details on your problem. It appears to be a builder registration mismatch problem and we will be releasing a fix for the next releases https://github.com/abpframework/abp/releases
You can change the localization registration for the time being until we publish the fix.
// app.config.ts
import { registerLocaleForEsBuild } from '@abp/ng.core/locale';
export const appConfig: ApplicationConfig = {
provideAbpCore(
withOptions({
environment,
registerLocaleFn: registerLocaleForEsBuild(),
})
),
],
};
You can let us know if you need further assistance. Thank you for your cooperation.
Hello,
Thank you for providing extra details about your problem. I have tried the same approach on my side. However, I could not produce the same issue on my end. Here is how I have tried logging in as a tenant:
If you think that I have made a mistake while trying to produce the problem, you can guide me. You can also send a minimal, reproducible example to my e-mail address: sumeyye.kurtulus@volosoft.com
Thank you for your cooperation.
