Activities of "mmukkara"

I don't think you understand. Did you try it at your end to replicate the issue mentioned above. We haven't changed anything in the tsconfig.json. We don't have local reference for LeptonX theme.

Can you please re-read the the thread and propose a solution. We got response after 7 days with out reading what is the issue.

Appreciate someone look into this.

This is tsconfig.json file

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@proxy": [
        "src/app/proxy/index.ts"
      ],
      "@proxy/*": [
        "src/app/proxy/*"
      ],
	  "@shared/*": [ "src/app/main/shared/*" ],
      "@app/*": [ "src/app/main/*" ],
    },
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  }
}

any luck on this...appreciate your help

What am we missing...here is my simplified code of Topmenu ApplicationLayout replacement...

app.Module.ts

import { TopMenuLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/layouts';
import { LpxTopMenuLayoutModule } from '@volosoft/ngx-lepton-x/layouts';
import { LpxResponsiveModule } from '@volo/ngx-lepton-x.core';
import { LpxHeaderModule} from '@volosoft/ngx-lepton-x/layouts';
import { LpxToolbarModule } from '@volosoft/ngx-lepton-x/layouts';
import { LpxToolbarContainerModule } from '@volosoft/ngx-lepton-x/layouts';
import { LpxMobileNavbarModule } from '@volosoft/ngx-lepton-x/layouts';
import { LpxTopbarContentModule } from '@volosoft/ngx-lepton-x';
`
`imports: [
...
    LpxTopMenuLayoutModule,
    LpxResponsiveModule,
    LpxHeaderModule,
    LpxToolbarModule,
    LpxToolbarContainerModule,
    LpxMobileNavbarModule,
    LpxTopbarContentModule

app.component.ts

`this.replaceableComponents.add({
        component: CustomTopMenuLayoutComponent,
        key: eThemeLeptonXComponents.ApplicationLayout,
      });`

mycustom-top-menu-layout.component.html (Simplified)

`<header>
  <div class="lpx-header-top">
    <lpx-brand-logo></lpx-brand-logo>
    <lpx-top-menu-navbar></lpx-top-menu-navbar>

    <div class="lpx-right-menu">
      <lpx-settings class="d-flex"> </lpx-settings>
      <lpx-header-toolbar></lpx-header-toolbar>
    </div>
  </div>
</header>

<div class="lpx-topbar-container">
  <div class="lpx-topbar">
    <div class="lpx-breadcrumb-wrapper d-flex">
      <nav class="lpx-breadcrumb-container">
        <lpx-breadcrumb></lpx-breadcrumb>
      </nav>
    </div>
  </div>
</div>

<div class="lpx-content-container">
  <div class="lpx-content-wrapper">
    <div class="lpx-content">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

<lpx-mobile-navbar *lpxResponsive="'all md-none'"></lpx-mobile-navbar>
<lpx-footer></lpx-footer>

I get these errors error NG8001: 'lpx-brand-logo' is not a known element: ** error NG8001: 'lpx-settings' is not a known element:** error NG8001: 'lpx-header-toolbar' is not a known element:

after adding LpxBrandLogoModule, SettingsModule to app.mdule.ts we still get error NG8001: 'lpx-header-toolbar' is not a known element:

We checked the code in the LeptonX source code and HeaderToolbarComponent is not in **exports: ** of LpxHeaderModule (header.module.ts). When we declare the component we get error

 Error: Module not found: Error: Package path ./layouts/lib/top-menu-layout/components/header/header-toolbar/header-toolbar.component is not exported from package 
 \node_modules\@volosoft\ngx-lepton-x (see exports field in \node_modules\@volosoft\ngx-lepton-x\package.json)

@mahmut, None of your solution like adding LpxHeaderModule or declaring component worked. Can you please try from your end and let us know correct answer.

Please help...we are stuck!!!

Same issue even after adding LpxHeaderModule to the app.module.ts

import { TopMenuLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/layouts'; import { LpxTopMenuLayoutModule } from '@volosoft/ngx-lepton-x/layouts'; import { **LpxHeaderModule **} from '@volosoft/ngx-lepton-x/layouts'; import { LpxToolbarModule } from '@volosoft/ngx-lepton-x/layouts'; import { LpxToolbarContainerModule } from '@volosoft/ngx-lepton-x/layouts'; import { LpxMobileNavbarModule } from '@volosoft/ngx-lepton-x/layouts'; import { LpxTopbarContentModule } from '@volosoft/ngx-lepton-x';

@NgModule({ declarations: imports: [ ....
TopMenuLayoutModule.forRoot(), LpxTopMenuLayoutModule.forRoot(), LpxHeaderModule, LpxToolbarModule, LpxToolbarContainerModule, LpxMobileNavbarModule, LpxTopbarContentModule ],

any luck on this...appreciate your help

Hi @liangshiwei,

We followed documentation you have shared. Downloaded LeptonX Theme source code.Tried to replicate the same as in documentation with top-menu-layout.component.ts to achieve our layout.

1. Created my-top-menu-layout with the code from LeptonX top-menu-layout.component (Only the ABP Component Replacement code has been removed.)
2. We added imports to LpxTopMenuLayoutModule, LpxResponsiveModule in app.module.ts
3. Added this.replaceableComponents.add({ component: MyTopMenuLayoutComponent, key: eThemeLeptonXComponents.ApplicationLayout, }); to app.component.ts
4. We needed to change lpx-header component to have lpx-brand-logo,lpx-top-menu-navbar ,lpx-header-toolbar ,lpx-settings ,lpx-header-user (as in image shared above)
5. We keep getting error that error NG8001: 'lpx-header-user' is not a known element: and NG8001: 'lpx-header-toolbar' is not a known element:

**error NG8001: 'lpx-header-user' is not a known element:

1. If 'lpx-header-user' is an Angular component, then verify that it is part of this module.
2. If 'lpx-header-user' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. <lpx-header-user></lpx-header-user>** ** error NG8001: 'lpx-header-toolbar' is not a known element:
3. If 'lpx-header-toolbar' is an Angular component, then verify that it is part of this module.
4. If 'lpx-header-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. <lpx-header-toolbar></lpx-header-toolbar>**

Appreciate your help. What else is missing. Followed documentation from end to end.

@rafael..Ideally framework should have that option. Its basic requirement of any framework. Unfortunate abp seems like didn't think about it. Seems like we need to take long path. how did you manage to change the LeptonX source code. We downloaded LeptonX source code but we are unable to do anything with it. Any insight would be appreciated.

response would be appreciated.

Respond would be appreciated.

1. As per the top bar layout in LeptonX, Top bar is only coming as second line below the Header. We need to layout as in the picture to be sitting right beside logo
2. When top bar is used, there is no option of container width to be Full screen. We would like to have it as full screen with no or less margin than it is now.
3. Please see picture below for the layout we are intended to achieve.