Left navigation menu items missing after deployment

[emersonproact]

I have downloaded the Avalon 13.1.0 template. If I run locally, everything is fine. After deploying to an Azure App Service, the items on left navigation are not getting loaded. I am able to see collapsible profile but none of the items below such as 'Dashboards', 'Form Layout', etc.

If I inspect via the developer console I do see that the items within <ul> are missing (see code below) when compared to the Avalon template in PrimeNG site.

I feel like some items may not be loading correctly after deployment, and that is causing the issue with left nav items. Is there some setting which needs to be applied to the web.config file?

Code: Select all

<ul class="layout-menu layout-main-menu clearfix"><li app-menuitem="" class="ng-tns-c175-2 layout-root-menuitem ng-star-inserted"><!----><!----><!----><div class="layout-menu-tooltip ng-tns-c175-2"><div class="layout-menu-tooltip-arrow ng-tns-c175-2"></div><div class="layout-menu-tooltip-text ng-tns-c175-2">Favorites</div></div><!----><!----><!----></li><li app-menuitem="" class="ng-tns-c175-3 layout-root-menuitem ng-star-inserted"><!----><!----><!----><div class="layout-menu-tooltip ng-tns-c175-3"><div class="layout-menu-tooltip-arrow ng-tns-c175-3"></div><div class="layout-menu-tooltip-text ng-tns-c175-3">UI Kit</div></div><!----><!----><!----></li><li app-menuitem="" class="ng-tns-c175-4 layout-root-menuitem ng-star-inserted"><!----><!----><!----><div class="layout-menu-tooltip ng-tns-c175-4"><div class="layout-menu-tooltip-arrow ng-tns-c175-4"></div><div class="layout-menu-tooltip-text ng-tns-c175-4">Prime Blocks</div></div><!----><!----><!----></li><li app-menuitem="" class="ng-tns-c175-5 layout-root-menuitem ng-star-inserted"><!----><!----><!----><div class="layout-menu-tooltip ng-tns-c175-5"><div class="layout-menu-tooltip-arrow ng-tns-c175-5"></div><div class="layout-menu-tooltip-text ng-tns-c175-5">Utilities</div></div><!----><!----><!----></li><li app-menuitem="" class="ng-tns-c175-6 layout-root-menuitem ng-star-inserted"><!----><!----><!----><div class="layout-menu-tooltip ng-tns-c175-6"><div class="layout-menu-tooltip-arrow ng-tns-c175-6"></div><div class="layout-menu-tooltip-text ng-tns-c175-6">Pages</div></div><!----><!----><!----></li><li app-menuitem="" class="ng-tns-c175-7 layout-root-menuitem ng-star-inserted"><!----><!----><!----><div class="layout-menu-tooltip ng-tns-c175-7"><div class="layout-menu-tooltip-arrow ng-tns-c175-7"></div><div class="layout-menu-tooltip-text ng-tns-c175-7">Hierarchy</div></div><!----><!----><!----></li><li app-menuitem="" class="ng-tns-c175-8 layout-root-menuitem ng-star-inserted"><!----><!----><!----><div class="layout-menu-tooltip ng-tns-c175-8"><div class="layout-menu-tooltip-arrow ng-tns-c175-8"></div><div class="layout-menu-tooltip-text ng-tns-c175-8">Start</div></div><!----><!----><!----></li><!----></ul>

[cetincakiroglu]

Hi,

1-) Could you please paste the code as separated lines, it's difficult to understand right now?
2-) Could you please share your angular.json?

This problem is probably caused by your server side since https://primefaces.org/avalon-ng/ is the deployed live version of Avalon and all menu items appear as they should be.

Regards

[emersonproact]

This issue seems to be resolved.

I had an error after compiling "Cannot find module '@angular/core'" which I resolved by modifying tsonfig.json (see link below)

https://bobbyhadz.com/blog/javascript-c ... gular-core


after fixing this and redeploying, the navigation is showing.

[cetincakiroglu]

Hi,

Happy to hear that problem is solved.

Regards