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

• You can delete all imports (@volo/* | @volosoft/* | @abp/*(not core & oauth pacakges)) from app.module.ts
• Also delete all css file from angular.json (@volo | @volosoft)

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.

EDIT

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

• Use only boilerplate libraries (Core, OAuth and ThemeShared)
  • YET! ThemeShared built top of @ng-bootstrap package

• Use abp's modules with your custom project - Select any theme (Basic, Lepton or LeptonX)
  • 1.Override css files or use only this theme
  • OR
  • 2.Override theme package via add-package --with-source-code

🙂 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

  • which is solved with BaseComponent strategy. But I prefer the use takeUntilDestroyed() otherwise I'll add ngOnDestroy with no meaning 🙂

• 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

Component TS

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));
  }
}

Component HTML

<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>

Output

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 🙂