It depends on your auth strategy, if you want to use authorization code flow then just override MVC account module there is no any relation with angular for UI, but if you want to use password code flow then update environment file responseType=code to password and use AccountLayoutModule

Hello,

When you use code flow it'll go to server for auth process and on the server side Account Module manages this process. You can customize account module with download source code. Please check for customization ABP Suite is the another option for download source code

Also check

https://docs.abp.io/en/commercial/latest/themes/lepton-x/mvc#account-layout

Can you please check what you wrote. You mention about the Downloaded LeptonX Theme source code which means lepton-x libraries will be placed at your project.

⚠️Warning ⚠️

If you download the source code of the library after that you'll be the responsible on this module

This is the reason why I told you to can you please check tsconfig.json you need to give the custom path. In that way you can customize LeptonX theme project check the example please🙂

Please Apply the steps

Step 1

Step 2

Step 3

Result

Also if you want to learn how paths works in TypeScript please check

Hi masum.ulu,

We use abp update command to update angular project, is this normal?

abp update command only updates abp packages on angular side, you need to update @angular and other packages by your self. For angular upgrade operation you can use ng update command. Please check the guide

Hi again,

It seems like your package versions not stable

1.Update angular packages

First of all you need to update @angular/[package] && angular-[package] packages you can check the correct version with the @abp/* packages at here

2.Set correct version for theme lepton-x

@volosoft/abp.ng.theme.lepton-x package's version must be the excat ~2.3.0 version. Currently it seems like installing 2.3.0.rc.x version. Beside that if you've 3rd party library. This library's angular version must be the same with your project

Hi berly,

Can you please send screenshot your package.json file ?

Hello,

Have you checked the tsconfig.json in paths key, it should be included local reference for LeptonX theme. It seems like can't find the packages. LeptonX theme packages must work with local ref.

Hi Thomas,

This issue fixed in this PR can you please upgrade your project to 7.2.3

Hi again,

You can customize mobile menu items via

NavbarService from @volo/ngx-lepton-x.core

• This service provides menu items on left part

Also

MobileNavbarService from @volosoft/ngx-lepton-x

• This service provides settings and userProfileActions items

In that way you don't need to replace component completely, just patch the items by key.

Hi again,

Sorry I misunderstand your question, my reply was about Theme Lepton not LeptonX also it was Navbar not MobileNavbar

If you want to change mobile navbar on LeptonX, you can follow the below codes

import { ReplaceableComponentsService } from '@abp/ng.core';
import { eThemeLeptonXComponents } from '@abp/ng.theme.lepton-x';


export class AppComponent {
  constructor(replaceableComponents: ReplaceableComponentsService) {
    replaceableComponents.add({
      key: eThemeLeptonXComponents.MobileNavbar, //This is the key for mobile navbar
      component: CustomNavbarMobileComponent,
    });
  }
}