I have an issue after installing the template in my Blazor App.I have created a WebsiteLayout :
<div class="page"><header class="reveal_header"><div class="container"><div class="row align-items-center"><div class="col-6"><a href="index.html" class="logo_normal"><img src="img/logo.png" width="135" height="45" alt=""></a><a href="index.html" class="logo_sticky"><img src="img/logo_sticky.png" width="135" height="45" alt=""></a></div><div class="col-6"><nav><ul><li><a href="#booking_section" class="btn_1 btn_scrollto">Book Now</a></li><li><div class="hamburger_2 open_close_nav_panel"><div class="hamburger__box"><div class="hamburger__inner"></div></div></div></li></ul></nav></div></div></div><!-- /container --></header><!-- /Header --><div class="nav_panel"><a href="#0" class="closebt open_close_nav_panel"><i class="bi bi-x"></i></a><div class="logo_panel"><img src="img/logo_sticky.png" width="135" height="45" alt=""></div><div class="sidebar-navigation"><nav><ul class="level-1"><li class="parent"><a href="/">Home</a></li><li class="parent"><a href="#0">Properties</a><ul class="level-2"></ul></li><li><a href="about-us">About</a></li><li><a href="activities">Activities</a></li><li><a href="contact-us">Contact</a></li></ul><div class="panel_footer"></div><!-- /panel_footer --></nav></div><!-- /sidebar-navigation --></div><!-- /nav_panel --><main> @Body</main>And update my App.razor file :
@inject NavigationManager NavigationManager<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="@NavigationManager.BaseUri" /><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /><link href="css/fluent-base.css" rel="stylesheet" /><link rel="stylesheet" href="css/site.css" /><link rel="icon" href="favicon.ico" /><!-- Favicons--><link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"><link rel="apple-touch-icon" type="image/x-icon" href="img/apple-touch-icon-57x57-precomposed.png"><link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png"><link rel="apple-touch-icon" type="image/x-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png"><link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="img/apple-touch-icon-144x144-precomposed.png"><!-- GOOGLE WEB FONT--><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"><!-- BASE CSS --><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><link href="css/vendors.min.css" rel="stylesheet"><!-- YOUR CUSTOM CSS --><link href="css/custom-front.css" rel="stylesheet"><HeadOutlet @rendermode="@InteractiveServer" /></head><body><Routes @rendermode="@InteractiveServer" /><script src="_framework/blazor.web.js"></script><script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script><script src="js/common_scripts.js"></script><script src="js/common_functions.js"></script><script src="js/datepicker_search.js"></script><script src="js/datepicker_inline.js"></script><script src="phpmailer/validate.js"></script></body></html>The issue I have the page doesn't render properly. The menu doesn't work the loader just keeps loading. Unless I wrap the WebsiteLayout with :
<!DOCTYPE html><html lang="en"></html>Which works however it's is a wrong approach as it duplicates the <html> tag and gives this error:
Error: Found malformed component comment at Blazor:{"type":"server","prerenderId":"83f528a60f284f0fb0100ce2976663d4","key":{"locationHash":"B58C86790BC8BCEE61DF2E802390191A8955BF6986A528B86E5BFE98B3F8B405:8","formattedComponentKey":""},"sequence":1,"descriptor":"CfDJ8EqwM4xZHRRIq6L/2O4kUJZOMKwXjcHhPLB5ZYsfZm1hO19yS3wLiP56yeQtp9fFQprkqXl0r3XSi43JllkNJQSSt\u002BdQxWRtAWcuBiaJ\u002BaJax/qyOTeeNt04Qd0ozUDYlzRTB/puXqozu0zG61xtE2MW5UoLVr98R1KARBtOmikQ7jgg2k01sXWua5g9KocR\u002BU6pgFeD4Fbee2Bpz7Qkzbd1iuxB34ZtPG4jyjOpoFbjKuJ8msiG7aGc4z6e2aZEg/YJYUu0g9WAGzhi1tvF3NO3FuIz6ZVQhqOlKhoZEOmc4CVhi3aREf15OigMR5RH54lzhA20g7POh9xsXuAM/0NvpFjLvdQs5SrcmEQqC1Bk2NOiYNegnWF3xSc8Bgku1ZNfrfr7eNzEDv3wfTmpYbp0IBuDYriYv4vAAPYVsnMLVqAYXFnxIMOo4uPGQ\u002BfU\u002BNGipcJZyLz/5ofJNCxfwZw5iuBU2oagvhEeeghZwmeSqtRx/E0B/5eV0PHS9R9KjlTjmd7HXBJq7hY2UHS/wNv4iTX/sB3/QhlEZJL3rnTu"} at Dt (blazor.web.js:1:42764) at Rt (blazor.web.js:1:41344) at Rt (blazor.web.js:1:41417) at Rt (blazor.web.js:1:41417) at blazor.web.js:1:40607 at St (blazor.web.js:1:40659) at bi (blazor.web.js:1:171526) at blazor.web.js:1:186824 at Ki (blazor.web.js:1:186888)The problem is with javascript , there is no errors however when I remove loader element I can see that page is missing the content generated by JS.