Hello we've created issue https://github.com/abpframework/abp/issues/17923 we'll fix. I'll refund your credit after reproduce

Hello sudhakiran,

With the 7.4 version we're using authorization code flow which means auth process will be continue on the browser (server side), If you still want to use client side (password code flow) I'll try to re-produce and I'll reply the solution.

You can check the detail on Our YouTube live session

Hello jtallon,

I've re-produced your case, we've created a issue, I also refunded your credit,

You can fix the problem with the giving correct service. ServiceNameDetailViewService extended an abstract service and in this service there is a injected service as public readonly proxyService = inject(OrderService); can you please use this service in the template for the lookup-select components

Example

<abp-lookup-select
  cid="order-situation-id"
  formControlName="situationId"
  [getFn]="service.proxyService.getSituationLookup"
></abp-lookup-select>

[UPDATED 10/17/23]

Alternatively you can use this way

product-detail.abstract.service.ts

 public readonly proxyService = inject(ProductService);
 
 public readonly getSituationLookup = this.proxyService.getSituationsLookup();

Hello devpayoff,

Can you please send your package.json file's content. We are using version ~16.0.0 for @angular/* and @angular-* packages. That's why can you please normalize your angular packages. Also @abp/* & @volo/* package's version must be the same for example: ~7.3.0 it will install latest patch version because of ~ sign.

You can check version matrix with @abp and @angular packages at the templates folder.

If you sent me your package.json file I'll try to re-produce your case

I dont want to patch the user name property, I want to show a different property in there , instead of user name

Then you need to follow my 2.Way description. In that way you will be customize toolbar component

Hello mohammedalqaisi,

You can't create CRUD page for module in created app template project,

Instead you need to create module separately and give the application project with local reference with that way you can make module development.

I've refunded your credit

Hello,

You can use UserProfileService from @volo/ngx-lepton-x.core package for the patch userName property but it's not a good way

Example

import { Component, inject } from '@angular/core';
import { UserProfileService } from '@volo/ngx-lepton-x.core';

@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>
  `,
})
export class AppComponent {
  protected readonly userProfileService = inject(UserProfileService);

  constructor() {
    this.userProfileService.patchUser({
      userName: 'Masum ULU',
    });
  }
}

2.Way

You can extend toolbar-container and toolbar component and customize template

Step 1 (Create extended ToolbarContainerComponent)

import { Component } from '@angular/core';
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
import {
  LpxCoreModule,
  LpxNavbarModule,
  LpxAvatarModule,
  LpxClickOutsideModule,
} from '@volo/ngx-lepton-x.core';
import { LpxContextMenuModule } from '@volosoft/ngx-lepton-x';
import { ToolbarContainerComponent } from '@volosoft/ngx-lepton-x/layouts';
import { MyToolbarComponent } from './toolbar.component';

@Component({
  standalone: true,
  selector: 'app-toolbar-container',
  template: `
    <lpx-toolbar [profileRef]="profileRef$" (profileClick)="toggleCtxMenu()">
      <ng-container
        *ngIf="{
          user: userProfileService.user$ | async,
          profileRef: profileRef$ | async
        } as data"
      >
        <lpx-context-menu
          *ngIf="data.profileRef"
          #menu="lpx-context-menu"
          (lpxClickOutside)="menu.close()"
          [exceptedRefs]="[data.profileRef]"
        >
          <lpx-context-menu-header>
            <div class="lpx-user-ctx-header">
              <div class="lpx-user-ctx-img">
                <lpx-avatar [avatar]="data.user?.avatar"></lpx-avatar>
              </div>
              <div class="lpx-user-ctx-info">
                <span class="lpx-context-menu-user-name">{{
                  data.user?.fullName || data.user?.userName
                }}</span>
                <span
                  *ngIf="data.user?.tenant?.name as tenantName"
                  class="lpx-context-menu-user-tenant"
                >
                  {{ tenantName }}
                </span>
                <span class="lpx-context-menu-user-email">{{ data.user?.email }}</span>
              </div>
            </div>
          </lpx-context-menu-header>

          <ng-container *ngFor="let actions of data.user?.userActionGroups">
            <lpx-context-menu-action-group>
              <lpx-navbar-routes [navbarItems]="actions" [routerItem]="false"></lpx-navbar-routes>
            </lpx-context-menu-action-group>
          </ng-container>
        </lpx-context-menu>
      </ng-container>
    </lpx-toolbar>
  `,
  imports: [
    NgIf,
    NgFor,
    AsyncPipe,
    LpxAvatarModule,
    LpxClickOutsideModule,
    LpxContextMenuModule,
    LpxCoreModule,
    LpxNavbarModule,
    MyToolbarComponent,
  ],
})
export class MyToolbarContainerComponent extends ToolbarContainerComponent {}

Step 2 (Create extended ToolbarComponent)

import { Component, ViewEncapsulation } from '@angular/core';
import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
import { LpxAvatarModule } from '@volo/ngx-lepton-x.core';
import { ToolbarComponent, LpxToolbarModule } from '@volosoft/ngx-lepton-x/layouts';

@Component({
  selector: 'lpx-toolbar',
  standalone: true,
  template: `
    <div class="lpx-toolbar">
      <ng-container *ngIf="userProfileService.user$ | async as user">
        <ng-content></ng-content>
        <nav class="lpx-toolbar">
          <ul class="lpx-nav-menu">
            <li
              *ngIf="authService.isUserExists$ | async; else loginBlock"
              #profileLink
              class="outer-menu-item lpx-user-menu"
              (click)="profileClick.emit()"
            >
              <a class="lpx-menu-item-link">
                <lpx-avatar [avatar]="user.avatar"></lpx-avatar>
                <!--UPDATE HERE-->
                <span class="lpx-menu-item-text">{{ user.fullName || user.userName }}</span>
                <!--UPDATE HERE-->
              </a>
            </li>
            <ng-template #loginBlock>
              <li class="outer-menu-item lpx-user-menu text-center">
                <a class="lpx-menu-item-link" (click)="navigateToLogin()">
                  <i class="bi bi-box-arrow-right"></i>
                </a>
              </li>
            </ng-template>
          </ul>

          <ng-container
            *ngTemplateOutlet="
              itemsTmp || defaultItemsTmp;
              context: { $implicit: toolbarService.items$ | async }
            "
          ></ng-container>
        </nav>
      </ng-container>
      <ng-template #defaultItemsTmp let-items>
        <lpx-toolbar-items [items]="items"></lpx-toolbar-items>
      </ng-template>
    </div>
  `,
  imports: [NgIf, AsyncPipe, NgTemplateOutlet, LpxAvatarModule, LpxToolbarModule],
  encapsulation: ViewEncapsulation.None,
})
export class MyToolbarComponent extends ToolbarComponent {}

Step 3 (Replace component in app.component.ts)

import { Component, inject } from '@angular/core';
import { ReplaceableComponentsService } from '@abp/ng.core';
import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
import { MyToolbarContainerComponent } from './lepton-x/components/toolbar/toolbar-container.component';

@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>
  `,
})
export class AppComponent {
  protected readonly replaceableService = inject(ReplaceableComponentsService);

  constructor() {
    this.replaceableService.add({
      key: eThemeLeptonXComponents.Toolbar,
      component: MyToolbarContainerComponent,
    });
  }
}

Can you please send your angular folder without your custom implementation (Modules, component etc..)

We tried your environment with the new project same as your version etc. I'll try your project (Don't need backend or yours modules)

• Please send to support@abp.io with your ticket id

I need to mention again, it's not about abp it's about the normalize npm packages (especially 3rd party libs and angular package version matrix). If you could build project without abp, you also need to make normalize npm packages. I've told that you can use templates folder as guidelines.

Beside that's we are also using external package for example (https://ng.ant.design/docs/introduce/en) we're keep stable versions we're not faced with problem

Have you removed node_modules and yarn.lock files also remove cache with yarn cache clean command ?

Lastly what's your node version. I've used 18.15.0 please be sure all is the same

I'm using nvm package for using multiple node version

Hi again,

You need to make some changes,

• First of all after update @abp/* | @volo/* | @volosoft/* packages please check the template for @angular/* and @angular-* packages it must be stable @abp and @angular packages
• Also, for the theme package please use ~ operator instad ^ or exac ("1.0.0" don't use like that).

Conclusion

• Please take care semantic versioning your 3rd party dependency's angular version can effect your project. It's not only about abp it's about frontend world 🙂
• Try to use below schema
  • Remove existing ones node_modules | yarn.lock | package-lock.json
  • yarn cache clean
  • npm cache clean --force
  • yarn
  • yarn start

Apply these steps it must work

Please search for ~ and ^ operators A.K.A Semantic versioning

{
  //..Others
 "dependencies": {
    "@abp/ng.components": "~7.2.0",
    "@abp/ng.core": "~7.2.0",
    "@abp/ng.oauth": "~7.2.0",
    "@abp/ng.setting-management": "~7.2.0",
    "@abp/ng.theme.shared": "~7.2.0",
    "@agm/core": "^3.0.0-beta.0",
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/google-maps": "^15.0.0",
    "@angular/localize": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@types/googlemaps": "^3.0.0",
    "@volo/abp.commercial.ng.ui": "~7.2.0",
    "@volo/abp.ng.account": "~7.2.0",
    "@volo/abp.ng.audit-logging": "~7.2.0",
    "@volo/abp.ng.gdpr": "~7.2.0",
    "@volo/abp.ng.identity": "~7.2.0",
    "@volo/abp.ng.language-management": "~7.2.0",
    "@volo/abp.ng.openiddictpro": "~7.2.0",
    "@volo/abp.ng.saas": "~7.2.0",
    "@volo/abp.ng.text-template-management": "~7.2.0",
    "@volo/ngx-lepton-x.core": "~2.2.0",
    "@volosoft/abp.ng.theme.lepton-x": "~2.2.0",
    "rxjs": "7.5.6",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.0"
  },
  "devDependencies": {
    "@abp/ng.schematics": "~7.2.0",
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^15.0.0",
    "@angular-eslint/eslint-plugin": "^15.0.0",
    "@angular-eslint/eslint-plugin-template": "^15.0.0",
    "@angular-eslint/schematics": "^15.0.0",
    "@angular-eslint/template-parser": "^15.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@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": "^15.0.0",
    "typescript": "~4.8.0"
  }
}