Check the docs before asking a question: https://abp.io/docs/latest Check the samples to see the basic tasks: https://abp.io/docs/latest/samples The exact solution to your question may have been answered before, and please first use the search on the homepage.
Provide us with the following info:
🧐 Hint: If you are using the ABP Studio, you can see all the information about your solution from the configuration window, which opens when you right-click on the solution and click on the Solution Configuration button.
Recently updated entire project to v9.3.6
Did not upgrade to standalone components, updated app module to this:
import { CoreModule, provideAbpCore, withOptions } from '@abp/ng.core';
import { provideSettingManagementConfig, SettingManagementConfigModule } from '@abp/ng.setting-management/config';
import { provideAbpThemeShared, ThemeSharedModule } from '@abp/ng.theme.shared';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';
import { CommercialUiConfigModule, provideCommercialUiConfig } from '@volo/abp.commercial.ng.ui/config';
import { AccountAdminConfigModule, provideAccountAdminConfig } from '@volo/abp.ng.account/admin/config';
import { AccountPublicConfigModule, provideAccountPublicConfig } from '@volo/abp.ng.account/public/config';
import { AuditLoggingConfigModule, provideAuditLoggingConfig } from '@volo/abp.ng.audit-logging/config';
import { IdentityConfigModule, provideIdentityConfig } from '@volo/abp.ng.identity/config';
import { LanguageManagementConfigModule, provideLanguageManagementConfig } from '@volo/abp.ng.language-management/config';
import { registerLocale } from '@volo/abp.ng.language-management/locale';
import { provideSaasConfig, SaasConfigModule } from '@volo/abp.ng.saas/config';
import { provideTextTemplateManagementConfig, TextTemplateManagementConfigModule } from '@volo/abp.ng.text-template-management/config';
import { provideThemeLepton, ThemeLeptonModule } from '@volo/abp.ng.theme.lepton';
import { environment } from '../environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ApproveUserActionComponent } from './extentions/user/approve-user/approve-user-action.component';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { MySettingsComponent } from './my-settings/my-settings.component';
import { provideAbpOAuth } from '@abp/ng.oauth';
import { providePrimeNG } from 'primeng/config';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import Aura from '@primeuix/themes/aura';
import { TitleStrategy } from '@angular/router';
import { CustomTitleStrategy } from './custom-title-strategy';
@NgModule({
declarations: [
AppComponent,
ApproveUserActionComponent,
MySettingsComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
CoreModule,
ThemeSharedModule,
AccountAdminConfigModule,
IdentityConfigModule,
TranslateModule.forRoot(),
SaasConfigModule,
AuditLoggingConfigModule,
SettingManagementConfigModule,
ThemeLeptonModule,
CommercialUiConfigModule,
NgbModule,
AngularSvgIconModule.forRoot(),
],
providers: [
ApproveUserActionComponent,
provideAbpCore(
withOptions({
environment,
registerLocaleFn: registerLocale(),
})
),
provideAbpOAuth(),
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura
}
}),
provideAbpThemeShared(),
provideAccountPublicConfig(),
provideIdentityConfig(),
provideAccountAdminConfig(),
provideLanguageManagementConfig(),
provideTextTemplateManagementConfig(),
provideSettingManagementConfig(),
provideSaasConfig(),
provideAuditLoggingConfig(),
provideThemeLepton(),
provideCommercialUiConfig(),
{
provide: TitleStrategy,
useClass: CustomTitleStrategy,
},
],
bootstrap: [AppComponent],
})
export class AppModule { }
Exception message and full stack trace:
- 403 Front-end UI message, no errors in network tab, only when deployed in Azure, not when working locally -> when permissionGuard is in routing.ts (removing permissionGuard stops this behavior)
- 2main.95b07f25787ff30c.js:1 ERROR TypeError: Cannot read properties of undefined (reading 'roles') at B1 (78906.e758127c22f07108.js:1:532577) at Ba (main.95b07f25787ff30c.js:1:1267644) at ac (main.95b07f25787ff30c.js:1:1277032) at $c (main.95b07f25787ff30c.js:1:1278595) at Df (main.95b07f25787ff30c.js:1:1278399) at zc (main.95b07f25787ff30c.js:1:1278284) at ac (main.95b07f25787ff30c.js:1:1277339) at $c (main.95b07f25787ff30c.js:1:1278595) at Df (main.95b07f25787ff30c.js:1:1278399) at Fh (main.95b07f25787ff30c.js:1:1278344)
Steps to reproduce the issue: First error: When routes are guarded like this, the 403 error pops up on some pages, and on reload of any page even though I am logged in with admin role with all permissions.
{
path: 'contractorslist',
title: 'Partners',
loadChildren: () => import('./contractorslist/contractorslist.module').then(m => m.ContractorslistModule),
canActivate: [authGuard, permissionGuard],
data: {
requiredPolicy: 'PartnerPortal.Companies',
},
}
Second error: I updated checks on current user roles to *abpPermission directives, resulting in the "Cannot read properties of undefined (reading 'roles')" error.
<div *abpPermission="'PartnerPortal.Companies.GetAll'" class="menu-item">
<div class="menu-content pt-8 pb-2">
<span class="menu-section text-muted text-uppercase fs-8 ls-1">{{
'::Menu:PartnerOverview' | abpLocalization
}}</span>
</div>
</div>
<div *ngFor="let companyType of companyTypes" class="menu-item">
<a
*abpPermission="'PartnerPortal.Companies.GetAll'"
class="menu-link without-sub"
[routerLink]="['/admin/contractorslist', companyType.id]"
routerLinkActive="active"
>
<span class="menu-icon">
<svg-icon
[src]="'./assets/media/icons/duotune/ecommerce/ecm008.svg'"
class="svg-icon svg-icon-2"
></svg-icon>
</span>
<span class="menu-title">
{{ companyType.name }}
</span>
</a>
</div>
3 Answer(s)
-
0
Need specific about Angular *abpPermission roles undefined and 403 on permissionGuard only in Azure. Might be related to AbpPermissionDirective attribute vs structural, or requiredPolicy mismatch, or missing permission definition. Also question 2816 already about directive error but different. Need maybe search_code @abp/ng.core AbpPermissionDirective.
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
Might be related to https://abp.io/support/questions/9057/Angular-Lepton-403-You-are-not-authorized?
Currently, front-end packages are as follows:
{ "name": "PartnerPortal", "version": "2.0.0", "scripts": { "ng": "ng", "start": "ng serve --open", "build": "ng build", "build:prod": "ng build --configuration production", "watch": "ng build --watch --configuration development", "test": "ng test", "lint": "ng lint" }, "private": true, "dependencies": { "@abp/ng.components": "~10.0.0", "@abp/ng.core": "~10.0.0", "@abp/ng.oauth": "~10.0.0", "@abp/ng.setting-management": "~10.0.0", "@abp/ng.theme.shared": "~10.0.0", "@angular-eslint/schematics": "^20.1.1", "@angular/animations": "~20.0.0", "@angular/cdk": "~20.0.0", "@angular/common": "~20.0.0", "@angular/compiler": "~20.0.0", "@angular/core": "~20.0.0", "@angular/forms": "~20.0.0", "@angular/localize": "~20.0.0", "@angular/platform-browser": "~20.0.0", "@angular/platform-browser-dynamic": "~20.0.0", "@angular/router": "~20.0.0", "@fortawesome/fontawesome-free": "^5.0.0", "@ng-bootstrap/ng-bootstrap": "^19.0.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^6.0.0", "@popperjs/core": "~2.11.0", "@primeuix/styled": "^0.7.4", "@primeuix/themes": "^1.2.5", "@primeuix/utils": "^0.6.3", "@swimlane/ngx-datatable": "^22.0.0", "@tinymce/tinymce-angular": "^8.0.0", "@types/bootstrap": "^5.2.10", "@types/object-path": "^0.11.1", "@types/prismjs": "^1.0.0", "@volo/abp.commercial.ng.ui": "~10.0.0", "@volo/abp.ng.account": "~10.0.0", "@volo/abp.ng.audit-logging": "~10.0.0", "@volo/abp.ng.file-management": "~10.0.0", "@volo/abp.ng.identity": "~10.0.0", "@volo/abp.ng.identity-server": "~10.0.0", "@volo/abp.ng.language-management": "~10.0.0", "@volo/abp.ng.saas": "~10.0.0", "@volo/abp.ng.text-template-management": "~10.0.0", "@volo/abp.ng.theme.lepton": "~10.0.0", "angular-oauth2-oidc": "^16.0.0", "angular-svg-icon": "^19.0.0", "animate.css": "^4.1.1", "apexcharts": "^3.27.2", "bootstrap": "^5.3.8", "bootstrap-icons": "^1.13.1", "clipboard": "^2.0.8", "dompurify": "^3.3.0", "flag-icons": "^7.2.3", "jquery": "^3.6.0", "line-awesome": "^1.3.0", "ng-apexcharts": "1.8.0", "ng-zorro-antd": "~20.0.0", "nouislider": "^15.2.0", "object-path": "^0.11.5", "primeng": "^20.3.0", "prism-themes": "^1.8.0", "prismjs": "^1.0.0", "rxjs": "~7.8.0", "socicon": "^3.0.0", "tslib": "^2.7.0", "typescript": "~5.8.0", "zone.js": "~0.15.0" }, "devDependencies": { "@abp/ng.schematics": "~10.0.0", "@angular-devkit/build-angular": "~20.0.0", "@angular/compiler-cli": "~20.0.0", "@angular/language-service": "~20.0.0", "@types/jasmine": "~3.6.0", "@types/node": "^12.0.0", "eslint": "^7.32.0", "jasmine-core": "~3.7.0", "ng-packagr": "~20.0.0" }, "overrides": { "@swimlane/ngx-datatable": "^22.0.0" } } -
0
Hello,
Thank you for explaining the problem with details. However, I remember that we have fixed this problem in a previous version and could not produce it on my end. Is it possible for you to share a minimal reproducible example via email so that I can assist you further. Here is my address: sumeyye.kurtulus@volosoft.com
Thank you for your cooperation.
