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.
**error NG8001: 'lpx-header-user' is not a known element:
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.