ABP latest test project， After refreshing with F5, it shows that You are not authorized

[billpeace]

GitHub Issues

ABP latest test project

abp new Acme.TestBookStore -u angular -m none --theme basic -csf

"@abp/ng.theme.basic": "~9.1.0",
"@abp/ng.theme.shared": "~9.1.0",
"@angular/animations": "~19.1.0",

http://localhost:4200/account/manage After F5，the text is not Localization
http://localhost:4200/identity/roles After F5，You are not authorized

[billpeace]

Has anyone reproduced this issue? Can it be resolved?

[desmored]

Same problem here upgrading a 8.3.4 project to 9.1.1, the AuthGuard receives an initially not granted permission due to reactivity issues. We have also problems on F5 refresh with PageTitleStrategy logic (shows MyProjectName as title the first time), translations and also with user isAuthenticated logic.

Downgrading the frontend to Abp 9.0.8 (even mantaining Angular 19 in the app) solves this issues.

[desmored]

I noted this PR that fixes a similar AuthGuard issue, but i'm not so confident about the implementation:
#22581

[gvassao]

I'm having the same issue as well. Upgraded my project from 9.0.3 to 9.1.1 and the translations won't load on page load. If I change the language it works but then it breaks again after pressing F5. Even if a component re-renders after the initial load (which has only the key and not translation itself), then it displays the correct text.

I put a breakpoint here and I noticed that using 9.0.3, the page renders after calling that function but with 9.1.1 it renders the page before calling that function.

I haven't been able to find a solution. I'll be holding on to upgrade it or I was also considering starting a new angular app and moving my code there assuming the default template is working.

As @desmored said, upgrading our app to Angular 19 works but when we upgrade to ABP 9.1.1 it breaks

[gvassao]

@maliming Sorry to tag you but this issue has been opened for 3 weeks.

I was able to reproduce it with the default template:

1. dotnet tool update -g Volo.Abp.Studio.Cli.
2. abp new Acme.TestBookStore -u angular -m none --theme basic -csf.
3. Run the app.
4. Menu item shows the key instead of the text.
5. Change the language. Check how it correctly updates the menu text.
6. Refresh the page. Menu item has key instead of translation.
   

Is this a known issue?

[maliming]

hi @gvassao

Can you check this?

https://abp.io/qa/questions/9057/3a19089f-135a-70c2-f801-00c88e6fd68d

[sumeyyeKurtulus]

Hello @billpeace @gvassao @desmored you can replace the routes component until we publish the fix related to the localization like this:

// app.component.ts
import { eThemeBasicComponents } from '@abp/ng.theme.basic';
  
export class AppComponent {
  private replaceableComponents = inject(ReplaceableComponentsService);
  constructor() {
    this.replaceableComponents.add({
      component: NewRoutesComponent,
      key: eThemeBasicComponents.Routes,
    });
  }
}

// new-routes.component.ts
import { RoutesComponent } from '@abp/ng.theme.basic';

@Component({
  selector: 'app-new-routes',
  imports: [SharedModule],
  template: `<ul class="navbar-nav">
    @for (route of routesService.visible$ | async; track $index) {
    <ng-container
      [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
      [ngTemplateOutletContext]="{ $implicit: route }"
    />
    }

    <ng-template #defaultLink let-route>
      <li class="nav-item" *abpPermission="route.requiredPolicy">
        <a class="nav-link" [routerLink]="[route.path]">
          @if (route.iconClass) {
          <i [ngClass]="route.iconClass"></i>
          }
          {{ localizationService.instant(route.name) }}
        </a>
      </li>
    </ng-template>

    <ng-template #dropdownLink let-route>
      @if (route.children?.length) {
      <li
        class="nav-item dropdown"
        display="static"
        *abpPermission="route.requiredPolicy"
        (click)="
          rootDropdownExpand[route.name]
            ? (rootDropdownExpand[route.name] = false)
            : (rootDropdownExpand[route.name] = true)
        "
      >
        <a
          class="nav-link dropdown-toggle"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
          href="javascript:void(0)"
        >
          @if (route.iconClass) {
          <i [ngClass]="route.iconClass"></i>
          }
          {{ localizationService.instant(route.name) }}
        </a>
        <div
          #routeContainer
          class="dropdown-menu border-0 shadow-sm"
          (click)="$event.preventDefault(); $event.stopPropagation()"
          [class.d-block]="smallScreen && rootDropdownExpand[route.name]"
        >
          <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
        </div>
      </li>
      }
    </ng-template>

    <ng-template #forTemplate let-route>
      @for (child of route.children; track $index) {
      <ng-template
        [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
        [ngTemplateOutletContext]="{ $implicit: child }"
      />
      }
    </ng-template>

    <ng-template #defaultChild let-child>
      @if (child.path) {
      <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
        <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
          @if (child.iconClass) {
          <i [ngClass]="child.iconClass"></i>
          }
          {{ child.name | abpLocalization }}</a
        >
      </div>
      }
    </ng-template>

    <ng-template #dropdownChild let-child>
      <div
        class="dropdown-submenu"
        ngbDropdown
        #dropdownSubmenu="ngbDropdown"
        placement="right-top"
        [autoClose]="true"
        *abpPermission="child.requiredPolicy"
      >
        <div ngbDropdownToggle [class.dropdown-toggle]="false">
          <a
            abpEllipsis="210px"
            [abpEllipsisEnabled]="!smallScreen"
            role="button"
            class="btn d-block text-start dropdown-toggle"
          >
            @if (child.iconClass) {
            <i [ngClass]="child.iconClass"></i>
            }
            {{ child.name | abpLocalization }}
          </a>
        </div>
        <div
          #childrenContainer
          class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
          [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
        >
          <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }" />
        </div>
      </div>
    </ng-template>
  </ul>`,
})
export class NewRoutesComponent extends RoutesComponent {
  localizationService = inject(LocalizationService);
}