Activities of "masum.ulu"

All Question Answer
Newest Oldest
Exception in browser at initial pageload of a deployed production build #5945
Answer

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

Use user first name and last name on the menu profile instead of user name in ABPUSer table #5889
Answer

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

Angular Module Creation in ABP Suite Fails to Generate Entity Files #5849
Answer

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

Use user first name and last name on the menu profile instead of user name in ABPUSer table #5889
Answer

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,
    });
  }
}
Error after install package #5861
Answer

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

Error after install package #5861
Answer

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

Error after install package #5861
Answer

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

Error after install package #5861
Answer

Hello Abdulaziz_Alsaffar,

What's your lepton-x package version in package.json ? It must be "@volosoft/abp.ng.theme.lepton-x":"~2.3.0" can you please try to set this version and run yarn command

Upgrade 7.3.2 to 7.4.0-rc.4 error #5874
Answer

Hello linhhn@arius.vn

Can you please send your package.json file, probably your @abp/* or @volo/* package's version is not correct or if you use lepton-x it must be 2.4.0-rc.4 if CLI didn't update please set this version for lepton-x theme

Account manage edit form contribute #5845
Answer

Hello,

  • I've created an internal issue for config-options model and I've refunded your credit.
  • Also We'll make sure why extra property's label not localized. If there is a bug we'll create another issue for that I'll give you feedback 🙂
Showing 81 to 90 of 219 entries
Made with ❤️ on ABP v9.0.0-preview Updated on September 20, 2024, 08:30