Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.
If you're creating a bug/problem report, please include followings:
- ABP Framework version: v5.2.2
- UI type: Angular
- DB provider: EF Core
- Tiered (MVC) or Identity Server Separated (Angular): no
Hello
I have been developing dynamic theming functionality for our application so that tenants can select their own colour schemes, logo and background images at runtime with only minimal Lepton Theme sourcecode integration to achieve it (allowing for easier Abp Framework version upgrades). I've been weighing up whether to write a community article sharing how it can be done (time permitting!). To give a brief summary of how it works -
- Certain Lepton Theme styles / colours have been overriden with CSS var() values to allow changing of colours are runtime (not build time)
- These var() values are set on application startup during the APP_INITIALIZE phase of the Angular client from a custom branding endpoint I have set up on the server side
- The Identity Server login / registration / confirmation etc etc pages utilise the Javascript API functionality to call this endpoint as well to set the var() values for the server side
- The var() values are stored as settings strings (HEX format) using the built in ABP setting management functionality
- The app is multi tenant so that when the tenant is swapped, the branding values specific to the tenant are loaded and applied in realtime
Everything works really well and is close to feature completeness, but there is one issue presenting 'bug-like' behaviour that I would like to resolve before calling it 100% complete.
When a users swaps to a different tenant on an Identity Server page, the new tenants branding is loaded and all the colours update correctly. When you log in and are redirected back to the Angular client, the Angular client will be loaded with the previous tenants branding information instead of the new tenant.
It appears as though the branding information is being retrieved before the tenant cookie is being updated to use the new tenant id on the Angular side. If I refresh the page, the correct branding is loaded as the tenant cookie is now set with the new tenant id.
Is there a way within the APP_INITIALIZE phase to have the tenant cookie update first before my branding loading function is called? I don't know how to define this kind of relationship during app startup.
I have attached screenshots that I hope will clarify the issue
Old tenant id sent to branding endpoint
New tenant id requested after branding request in APP_INITIALIZE
Thankyou
2 Answer(s)
-
0
Hello,
You can change your APP_INITIALIZER provider with the following provider
import { ConfigStateService } from '@abp/ng.core'; import { APP_INITIALIZER, Injector, NgModule } from '@angular/core'; import { filter, switchMap, take, tap } from 'rxjs/operators'; @NgModule({ declarations: [/* Declarations */], imports: [ /* Imports */], providers: [ // other providers { provide: APP_INITIALIZER, multi: true, deps: [Injector], useFactory: injector => { const service = injector.get(YOUR_SERVICE); const configStateService = injector.get(ConfigStateService); return () => { return configStateService .getOne$('currentTenant') .pipe( filter(Boolean), switchMap(tenant => service.yourMethod(tenant)), take(1) ) .toPromise(); }; }, }, ] }) export class AppModule {} -
0
@muhammedaltug I have been able to solve the problem using your provided code sample. Thank you!
