How do you change tenant?
Did you add SetTenant action into the pipe like below:
this.actions.pipe(ofActionSuccessful(SetStyle, SetTenant))
You can listen SetTenant action that dispatches when tenant change. The current tenant can be getted via Store
import { ... SetTenant, SessionState } from '@abp/ng.core'; // imported SetTenant and SessionState
import { ... Store } from '@ngxs/store'; // imported Store
//...
constructor( ... private store: Store) // injected Store
ngOnInit() {
this.actions.pipe(ofActionSuccessful(SetStyle, SetTenant)).subscribe(res => { // added SetTenant
console.log(this.store.selectSnapshot(SessionState.getTenant)) // logs current tenant
if (res instanceof SetStyle) {
console.log(res.payload) // logs style number e.g. 1
// your logic here
} else if (res instanceof SetTenant) {
console.log(res.payload) // logs new tenant e.g. {id: '6391bd36-d4b1-8a22-5fd6-39f461b01b37', name: 'Amazon'}
// your logic here
}
});
}
This logo is in the ApplicationLayoutComponent. You can replace this component with the Theme.ApplicationLayoutComponent key. See the layout replacement documentation. But I wouldn't recommend it for changing the logo.
The logo takes the url from a CSS property which is --logo or --logo-reverse. --logo and --logo-reverse properties are set when theme changed in the Lepton settings.
So, there are two ways for changing the logo:
1- Replacing the logos in the angular/src/assets/images/logo folder without changing the filenames.
2- Changing the CSS properties value as described below:
Open the app.component.ts and edit the content as shown below:
import { Actions, ofActionSuccessful } from '@ngxs/store'; // added this line
import { SetStyle } from '@volo/abp.ng.theme.lepton'; // added this line
// ...
export class AppComponent implements OnInit {
constructor(private lazyLoadService: LazyLoadService, private actions: Actions) {} // injected the actions
ngOnInit() {
//...
// Added the below content
this.actions.pipe(ofActionSuccessful(SetStyle)).subscribe(() => {
document.documentElement.style.setProperty(
'--logo',
`url('logo url here')`,
);
document.documentElement.style.setProperty(
'--logo-reverse',
`url('reverse logo url here')`,
);
});
}
}
I replaced the --logo property with http://abp.io/assets/abp-logo-light.svg and then UI looks like this:
We'll create a component that contains logo in v2.5. The component will be easily replaced.
Hi
Lepton theme uses two logos for each style. You can change these logos with your own logos without changing the filenames in the angular/src/assets/images/logo folder. Login page uses theme{x}-reverse.png
We have been create an issue about this error. Note: It doesn't break anything on runtime.
Hi,
Remove node_modules/@volo/abp.ng.account folder. Download the below zip and extract in the node_modules/@volo folder.
https://drive.google.com/file/d/1hYLBJDBT86fD7nMIZ3yKARntfEvWZFO3/view?usp=sharing
This problem has been fixed in v2.4.
It's fixed. https://github.com/abpframework/abp/commit/bb08a7ca5ecb0e2d26854e953dd6a601faff0ab0 Thanks for reporting.
Did you clean browser storages (local and storage) ?
Injectable decorator should be added the BookState like this:
import { Injectable } from '@angular/core'; // import the Injectable
@State<Book.State> ({
// state metadata
})
@Injectable() // add this line
export class BookState
For your first question;
issuer property in the environment must match the running address of .IdentityServer project