Activities of "triet.nguyen"

Hi,

Thank you for your clarification! And it does solve the issue.

I find the root cause from your answers by adding resolutions & upgrade theme.lepton-x related packages to ~5.0.3.

And removing // "@abp/*": ["node_modules/@abp/*"], // "@volo/*": ["node_modules/@volo/*"] in tsconfig.json file

// packages.json
{
  // ...
  "resolutions": { 
    "@ng-bootstrap/ng-bootstrap": "~19.0.0",
    "@volo/abp.commercial.ng.ui": "~10.0.3",
    "@volo/abp.ng.account": "~10.0.3"
  },
  "dependencies": {
    // ...
    "@abp/ng.theme.lepton-x": "~5.0.3",
    // ...
    "@volosoft/abp.ng.theme.lepton-x": "~5.0.3"
  },
  "devDependencies": {
    // ...
  }
}

Hi,

Thank you for your response. I followed your instruction and applied in both my real project & the public repository above.

The problem is still persisting. Please verify on your end to make sure you have the same issue!

Hi,

I need a person to support me this case. None of the responses from ABP Agent work for me!

Hi,

Steps to reproduce the issue:

• I've migrated ABP backend from v9.3.2 -> v10.0.3 done.
• I continue migrating ABP Angular app v9.3.2 -> v10.0.3.
• Fix issues of warnings/errors in codebase (our components).
• First issue, I get as below:

// root_effect_scheduler.mjs:3637
❌ ERROR RuntimeError: NG0200: Circular dependency detected for `_ConfigStateService`. Find more at https://v20.angular.dev/errors/NG0200

// main.ts:29 
❌ RuntimeError: NG0200: Circular dependency detected for `_ConfigStateService`. Find more at https://v20.angular.dev/errors/NG0200

// root_effect_scheduler.mjs:3637
❌ ERROR ɵNotFound: NG0201: No provider found for `InjectionToken CORE_OPTIONS`. Find more at https://v20.angular.dev/errors/NG0201

• Next, I search the problem and I notice to add this "@abp/*": ["node_modules/@abp/*"], "@volo/*": ["node_modules/@volo/*"] into tsconfig.json. In fact, it solves the problem.
• Then, I get other issues as below

Exception message and full stack trace:

//root_effect_scheduler.mjs:3637
❌ ERROR ɵNotFound: NG0201: No provider found for `InjectionToken SORT_COMPARE_FUNC`. Find more at https://v20.angular.dev/errors/NG0201
    at createRuntimeError (root_effect_scheduler.mjs:924:19)
    at NullInjector.get (root_effect_scheduler.mjs:1494:27)
    at R3Injector.get (root_effect_scheduler.mjs:2052:33)
    at R3Injector.get (root_effect_scheduler.mjs:2052:33)
    at R3Injector.retrieve (root_effect_scheduler.mjs:1936:25)
    at injectInjectorOnly (root_effect_scheduler.mjs:1049:39)
    at ɵɵinject (root_effect_scheduler.mjs:1061:42)
    at inject2 (root_effect_scheduler.mjs:1149:12)
    at new AbstractMenuService (abp-ng.theme.shared.mjs:1701:19)
    at new _UserMenuService (abp-ng.theme.shared.mjs:2138:5)

// main.ts:22
❌ ɵNotFound: NG0201: No provider found for `InjectionToken SORT_COMPARE_FUNC`. Find more at https://v20.angular.dev/errors/NG0201
    at createRuntimeError (root_effect_scheduler.mjs:924:19)
    at NullInjector.get (root_effect_scheduler.mjs:1494:27)
    at R3Injector.get (root_effect_scheduler.mjs:2052:33)
    at R3Injector.get (root_effect_scheduler.mjs:2052:33)
    at R3Injector.retrieve (root_effect_scheduler.mjs:1936:25)
    at injectInjectorOnly (root_effect_scheduler.mjs:1049:39)
    at ɵɵinject (root_effect_scheduler.mjs:1061:42)
    at inject2 (root_effect_scheduler.mjs:1149:12)
    at new AbstractMenuService (abp-ng.theme.shared.mjs:1701:19)
    at new _UserMenuService (abp-ng.theme.shared.mjs:2138:5)

// abp-ng.core.mjs:159
❌ You should add @abp/ng-oauth packages or create your own auth packages.

Here is the public repository you can pull and verify: https://github.com/trietng-decisiontreetech/abp_angular_upgrade_10.0.3 Please let me know if you find something. Thank you in advance!

Hi,

No I don't get any errors.

I can see the difference that ABP core modules use ApplicationLayout, but my component uses EmptyLayout.

Could you tell me what config to set the layout. As I know, we don't migrate or touch any configuration related to the layout.

Home page

Saas page

UPDATE

That's my fault, I migrated to use provideAppInitializer for APP_ROUTE_PROVIDER provider, but did not fully migrate yet.

Here is the right one

export const APP_ROUTE_PROVIDER = [
  provideAppInitializer(() => {
    configureRoutes();
  }),
];

function configureRoutes() {
  const routes = inject(RoutesService);
  routes.add([
    ...
  ]);
}

Hello,

Thank you, the version 9.2 fixed my problem, another issue comes in, why do I get the layout without side menu on our modules (e.g Home page).

If I route to http://localhost:4200/saas on the URL browser, then I will get the side menu.

Here is the registered providers & my home.component

Entry main

bootstrapApplication(AppComponent, {
  providers: [
    APP_ROUTE_PROVIDER,
    CUSTOM_MENU_ITEM,
    provideAnimations(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideAbpCore(withOptions({ environment, registerLocaleFn: registerLocale() })),
    provideAbpOAuth(),
    provideAbpThemeShared(),
    provideAccountAdminConfig(),
    provideAccountPublicConfig(),
    provideIdentityConfig(),
    provideTenantManagementConfig(),
    provideSaasConfig(),
    provideSettingManagementConfig(),
    provideOpeniddictproConfig(),
    provideLanguageManagementConfig(),
    provideChatConfig(),
    provideGdprConfig(
      withCookieConsentOptions({
        privacyPolicyUrl: 'gdpr-cookie-consent/privacy',
        cookiePolicyUrl: 'gdpr-cookie-consent/cookie',
      })
    ),
    provideFileManagementConfig(),
    provideAuditLoggingConfig(),
    provideTextTemplateManagementConfig(),
    provideCommercialUiConfig(),
    provideFeatureManagementConfig(),
    provideRouter(routes),
    importProvidersFrom(
      ThemeLeptonXModule.forRoot(),
      SideMenuLayoutModule.forRoot(),
      ProductServiceConfigModule.forRoot()
    ),
  ],
});

AppRoutes

// app.routes.ts
export const routes: Routes = [
  {
    path: 'home',
    pathMatch: 'full',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    canActivate: [authGuard, permissionGuard],
  },
  ...
];

Home Module

// home.module.ts
@NgModule({
    imports: [SharedModule, HomeRoutingModule, PageModule, HomeComponent],
})
export class HomeModule {}


// home-routing.module.ts
const routes: Routes = [{ path: '', component: HomeComponent, pathMatch: 'full', }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class HomeRoutingModule {}


// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  imports: [AnalysisModelComponent],
})
export class HomeComponent {
  get hasLoggedIn(): boolean {
    return this.oAuthService.hasValidAccessToken();
  }

  constructor(private oAuthService: OAuthService, private authService: AuthService) {}

  login() {
    this.authService.navigateToLogin();
  }
}

// home.component.html
<h2>Home</h2>
<div class="card">
    <div class="card-body">
      <h2>My Work</h2>
      <app-my-model [isShowOnHomePage]="true"></app-my-model>
    </div>
</div>```

The generated answer by AI does not help. I need a person to support this one. Additionally, we're using ABP commercial packages.

Hi,

I really need your support to fix the issue while migrating from v9.0.8 -> v9.1.3 on Angular only.

packages.json

{
  "name": "MyProject",
  "version": "2.0.0",
  "engines": {
    "node": "^22.0.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@abp/ng.components": "~9.1.3",
    "@abp/ng.feature-management": "~9.1.3",
    "@abp/ng.core": "~9.1.3",
    "@abp/ng.oauth": "~9.1.3",
    "@abp/ng.setting-management": "~9.1.3",
    "@abp/ng.theme.shared": "~9.1.3",
    "@angular/animations": "~19.1.8",
    "@angular/common": "~19.1.8",
    "@angular/compiler": "~19.1.8",
    "@angular/core": "~19.1.8",
    "@angular/forms": "~19.1.8",
    "@angular/localize": "~19.1.8",
    "@angular/platform-browser": "~19.1.8",
    "@angular/platform-browser-dynamic": "~19.1.8",
    "@angular/router": "~19.1.8",
    "@progress/kendo-angular-buttons": "^18.5.2",
    "@progress/kendo-angular-charts": "^18.5.2",
    "@progress/kendo-angular-common": "^18.5.2",
    "@progress/kendo-angular-dateinputs": "^18.5.2",
    "@progress/kendo-angular-dialog": "^18.5.2",
    "@progress/kendo-angular-dropdowns": "^18.5.2",
    "@progress/kendo-angular-excel-export": "^18.5.2",
    "@progress/kendo-angular-grid": "^18.5.2",
    "@progress/kendo-angular-icons": "^18.5.2",
    "@progress/kendo-angular-inputs": "^18.5.2",
    "@progress/kendo-angular-intl": "^18.5.2",
    "@progress/kendo-angular-l10n": "^18.5.2",
    "@progress/kendo-angular-label": "^18.5.2",
    "@progress/kendo-angular-layout": "^18.5.2",
    "@progress/kendo-angular-menu": "^18.5.2",
    "@progress/kendo-angular-navigation": "^18.5.2",
    "@progress/kendo-angular-pager": "^18.5.2",
    "@progress/kendo-angular-pdf-export": "^18.5.2",
    "@progress/kendo-angular-popup": "^18.5.2",
    "@progress/kendo-angular-progressbar": "^18.5.2",
    "@progress/kendo-angular-treelist": "^18.5.2",
    "@progress/kendo-angular-treeview": "^18.5.2",
    "@progress/kendo-angular-utils": "^18.5.2",
    "@progress/kendo-angular-toolbar": "^18.5.2",
    "@progress/kendo-data-query": "^1.7.1",
    "@progress/kendo-drawing": "^1.21.2",
    "@progress/kendo-licensing": "^1.5.3",
    "@progress/kendo-svg-icons": "^4.5.0",
    "@progress/kendo-theme-default": "^10.3.1",
    "@volo/abp.commercial.ng.ui": "~9.1.3",
    "@volo/abp.ng.account": "~9.1.3",
    "@volo/abp.ng.audit-logging": "~9.1.3",
    "@volo/abp.ng.chat": "~9.1.3",
    "@volo/abp.ng.file-management": "~9.1.3",
    "@volo/abp.ng.gdpr": "~9.1.3",
    "@volo/abp.ng.identity": "~9.1.3",
    "@volo/abp.ng.language-management": "~9.1.3",
    "@volo/abp.ng.openiddictpro": "~9.1.3",
    "@volo/abp.ng.saas": "~9.1.3",
    "@volo/abp.ng.text-template-management": "~9.1.3",
    "@volosoft/abp.ng.theme.lepton-x": "~4.1.3",
    "chart.js": "^3.8.0",
    "chartjs-plugin-datalabels": "^2.0.0",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.0",
    "jstree": "^3.3.12",
    "ng-zorro-antd": "^18.2.1",
    "ng2-charts": "^3.0.11",
    "ngx-datatable": "^1.0.3",
    "pako": "^2.0.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.0.0",
    "uuid": "^9.0.1",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@abp/ng.schematics": "~9.1.3",
    "@angular-devkit/build-angular": "~19.1.9",
    "@angular-eslint/builder": "^19.8.1",
    "@angular-eslint/eslint-plugin": "^19.8.1",
    "@angular-eslint/eslint-plugin-template": "^19.8.1",
    "@angular-eslint/schematics": "^19.8.1",
    "@angular-eslint/template-parser": "^19.8.1",
    "@angular/cli": "~19.1.9",
    "@angular/compiler-cli": "~19.1.8",
    "@angular/language-service": "~19.1.8",
    "@types/file-saver": "^2.0.7",
    "@types/jasmine": "~3.6.0",
    "@types/jszip": "^3.4.0",
    "@types/node": "^20.17.16",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.0",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.0.0",
    "ng-packagr": "~18.2.1",
    "typescript": "~5.5.4"
  }
}

This is the main.ts file

import { provideAbpCore, withOptions } from '@abp/ng.core';
import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
import { provideAbpOAuth } from '@abp/ng.oauth';
import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
import { provideAbpThemeShared, withHttpErrorConfig } from '@abp/ng.theme.shared';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import {
  enableProdMode,
  importProvidersFrom,
  provideZoneChangeDetection,
} from '@angular/core';
import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
import {
  BrowserAnimationsModule,
  provideAnimations,
} from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
import { provideCommercialUiConfig } from '@volo/abp.commercial.ng.ui/config';
import { provideAccountAdminConfig } from '@volo/abp.ng.account/admin/config';
import { provideAccountPublicConfig } from '@volo/abp.ng.account/public/config';
import { provideAuditLoggingConfig } from '@volo/abp.ng.audit-logging/config';
import { provideChatConfig } from '@volo/abp.ng.chat/config';
import { provideFileManagementConfig } from '@volo/abp.ng.file-management/config';
import { provideGdprConfig, withCookieConsentOptions } from '@volo/abp.ng.gdpr/config';
import { provideIdentityConfig } from '@volo/abp.ng.identity/config';
import { provideLanguageManagementConfig } from '@volo/abp.ng.language-management/config';
import { registerLocale } from '@volo/abp.ng.language-management/locale';
import { provideOpeniddictproConfig } from '@volo/abp.ng.openiddictpro/config';
import { provideSaasConfig } from '@volo/abp.ng.saas/config';
import { provideTextTemplateManagementConfig } from '@volo/abp.ng.text-template-management/config';
import { HttpErrorComponent, ThemeLeptonXModule } from '@volosoft/abp.ng.theme.lepton-x';
import { SideMenuLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/layouts';
import { routes } from './app/app-routing.module';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideAbpCore(withOptions({ environment, registerLocaleFn: registerLocale() })),
    provideAbpOAuth(),
    // provideIdentityConfig(),
    provideSettingManagementConfig(),
    provideFeatureManagementConfig(),
    // provideAccountAdminConfig(),
    // provideAccountPublicConfig(),
    // provideCommercialUiConfig(),
    provideAbpThemeShared(
      withHttpErrorConfig({
        errorScreen: {
          component: HttpErrorComponent,
          forWhichErrors: [401, 403, 404, 500],
          hideCloseIcon: true,
        },
      })
    ),
    // provideGdprConfig(
    //   withCookieConsentOptions({
    //     cookiePolicyUrl: '/gdpr-cookie-consent/cookie',
    //     privacyPolicyUrl: '/gdpr-cookie-consent/privacy',
    //   })
    // ),
    // provideLanguageManagementConfig(),
    // provideSaasConfig(),
    // provideAuditLoggingConfig(),
    // provideOpeniddictproConfig(),
    // provideTextTemplateManagementConfig(),
    provideChatConfig(),
    provideFileManagementConfig(),
    importProvidersFrom(
      BrowserModule,
      BrowserAnimationsModule,
      ThemeLeptonXModule.forRoot(),
      SideMenuLayoutModule.forRoot()
    ),
    provideAnimations(),
    provideHttpClient(withInterceptorsFromDi()),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
  ],
});

This is the version the app can run without issues. If I uncomment the provider methods such as provideIdentityConfig, provideAccountAdminConfig, provideAccountPublicConfig, provideCommercialUiConfig, provideGdprConfig, provideLanguageManagementConfig, provideSaasConfig, provideAuditLoggingConfig, provideOpeniddictproConfig, provideTextTemplateManagementConfig => then I will get the error "NullInjectorError: No provider for InjectionToken CORE_OPTIONS!"

I've set up a minimal app to have the same like the freshly generated app by using ABP Studio for microservices architecture.The new one is runnable, but applied to my project is not.

Here is the app.component.ts file.

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
    <abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
  `,
  styleUrls: ['./app.component.scss'],
  imports: [
    CoreModule,
    ThemeSharedModule,
    GdprConfigModule,
  ]
})
export class AppComponent { }

I appreciate any support in advance. Thanks!

Hi,

I would like to ask the ABP v9.0 still having backward-compatibility with .NET 8?

According to the Release Notes 9.0 (2024-11-19),

When read this note & we decide to stay on .NET 8 and migrate the ABP packages to v9.0.8. However, we've faced issues that the ABP packages only supports on .net9.0.

I do take a look on NuGet source, I see the Volo.Abp.AspNetCore also supports on .NET 9.0 only.

If the note is still valid, could you support us how to stay on .NET 8 while using ABP v9.0.8 packages?

Thank you!

Hi,

I have a solution to synchronize the cache for a service within a microservices architecture. I have successfully integrated with the IdentityService to receive notifications whenever a User or OrganizationUnit is created, updated, or deleted.

However, the service subscribes to the IdentityService, which runs on three replicas. From my observations on my local machine using Minikube, only one instance receives the event, not all instances.

Could you provide me what is the best approach in ABP framework that supports my case?

Note: We are using RabbitMQ as the message queue.