I just following the Getting Started page of Syncfusion here, however, I getting the 404 for css and js calls.
This is Blazor wasm PWA project create from the default MS template for .Net 7
Here the code snippet of HTML file.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>SFGetStarted</title>
<base rel='nofollow' href="/" />
<link rel='nofollow' href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link rel='nofollow' href="css/app.css" rel="stylesheet" />
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />
<link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />
<link rel='nofollow' href="SFGetStarted.Client.styles.css" rel="stylesheet" />
<link rel='nofollow' href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" rel='nofollow' href="icon-512.png" />
<link rel="apple-touch-icon" sizes="192x192" rel='nofollow' href="icon-192.png" />
</head>
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a rel='nofollow' href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
Hi Gobi,
https://blazor.syncfusion.com/documentation/appearance/themes#enable-static-web-assets-usage
https://blazor.syncfusion.com/documentation/nuget-packages
Based on the code you have referenced style sheet and script for Single NuGet.
If you are using individual NuGets, refer like below, (Ensure Syncfusion.Blazor.Themes NuGet referenced when using individual NuGet)
<head> ... <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /> <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> <!--Use below style and script reference paths, if you are using Syncfusion.Blazor Single NuGet--> <!--<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />--> <!--<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>--> </head> |
Thanks,
Sivakumar
Hi Sivakumar, Im still having issues. Please refer the attached project for reference.
Hi Gobi,
We have validated the attached sample and found that you have referred the Script & Style reference link of ‘Syncfusion.Blazor’ single NuGet package but installed our individual NuGet package in your case i.e ‘Syncfusion.Blazor.Buttons’ package. So, we suggest you to resolve the issue by installing ‘Syncfusion.Blazor.Themes’ package and modify the Script & Style references like in below code example.
Index.html
<head> //... <link rel='nofollow' href="css/app.css" rel="stylesheet" /> <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
//... </head>
<body> //... <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> </body>
|
Please find your modified sample project,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SFGetStarted-191851482
Regards,
Bharat Ram H