Hi again,
Okay then you just need to use @abp/ng.core
and abp/ng.oauth
version ~7.3.0
because you using @angular/*
packages version ~16.0.0
I'll create and share a sample soon
Hello,
Will you use abp's modules or do you need just boilerplate libraries (Core, OAuth & ThemeShared) ?
If you gonna use abp's modules like identity, language-management etc. then you need to use lepton-x or override lepton-x module otherwise UI won't work as well.
You can't use multiple theme in a project, theoretically you can but css class/id's will override your or our css.
You don't have to use lepton-x theme package if you gonna customize abp modules UI use theme.shared and add your custom css to angular.json > styles section. It depends on your UI strategy.
There are a few options that you can apply
🙂 unsubscriber$
will trigger when component destroy which means it won't track authenticated status. I suggest interceptor for handle authenticated status and prevent request. unsubscriber$
just kill subscription on destroy stage. Please separate the concerns
If applying filter operator is resolves your problem, try to use interceptor and handle this filtering process at here. In that way you can decide to sending request or not in a one place. I hope these helps you
This approach works - I've already checked it before. But the problem is that I have hundreds of components, each of which has dozen of API calls. The components use base class which contains unsubscriber$ and it is used in
ngOnDestroy
to be nullified and complete. Thanks to that, when I go to another component, any API anywhere is properly unsubscribed (takeUntil(this.unsubscriber$)
).Making use of one more check means I need to add this
filter(...)
in all those API calls. And this is not a very good approach, IMHO.... I'd prefer to make changes in the base class unsubscriber$ only...
There are 2 things here
Kill the stream after navigated
Don't request if not authenticated; for that I've just drop a simple solution you can use similar BaseComponent strategy or much better use async pipe and handle request process on template. Create a directive for authenticated condition etc.. This case seems like a specific case
Hi again,
If you want to unsubsribe or only subscribe when you logged in you can use isAuthenticated property in config state service for example
import { Component, DestroyRef, inject } from '@angular/core';
import { filter, finalize, map, switchMap } from 'rxjs';
import { ConfigStateService } from '@abp/ng.core';
import { IdentityUserService } from '@volo/abp.ng.identity/proxy';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent {
protected readonly configStateService = inject(ConfigStateService);
protected readonly identityUserService = inject(IdentityUserService);
readonly #destryoRef = inject(DestroyRef);
currentUser$ = this.configStateService.getOne$('currentUser');
users$ = this.identityUserService.getList({ maxResultCount: 10 }).pipe(map(res => res.items));
ngOnInit(): void {
this.currentUser$
.pipe(
filter(currentUser => !!currentUser?.isAuthenticated),
switchMap(() => this.identityUserService.getList({ maxResultCount: 10 })),
map(res => res.items),
takeUntilDestroyed(this.#destryoRef),
finalize(() => console.log('completed'))
)
.subscribe(users => console.log(users));
}
}
<div class="card" *ngIf="(currentUser$ | async).isAuthenticated">
<div class="card-header">{{ 'AbpIdentity::Users' | abpLocalization }}</div>
<div class="card-body">
<pre>{{ users$ | async | json }}</pre>
</div>
</div>
I'm logged in
I'm logged out
As you can see it's not sending any request if not authenticated. In template and in TS file I create a sample that you can use.
Hi again alpisala,
Can you please try to provide it in AppRoutingModule ?
Hello alexander,
I'm confused little bit there are a lot of different questions 🙂 Can you please explain your latest problem step by step what is your goal and what's the current problem to reach your goal ?
Hi,
You can also use @AlderCove's code like below
import { Injectable, inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
import { LocalizationService } from '@abp/ng.core';
@Injectable()
export class TemplatePageTitleStrategy extends TitleStrategy {
protected readonly title = inject(Title);
protected readonly localizationService = inject(LocalizationService);
override updateTitle(routerState: RouterStateSnapshot) {
const title = this.buildTitle(routerState);
const localizedTitle = this.localizationService.instant(title);
this.title.setTitle(localizedTitle);
}
}
Hi again,
Unfortunately I can't give a service like this, we just giving consultancy service on Mr. Galip. If you give me more details about issue I can try to help more. As I understand your previous issue versioning solved. If you can run angular application without exception which means it fixed. For other problems can you please create a new Question 🙂