We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Having issue with GetStarted page docs

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>



3 Replies

SR Sivakumar R Syncfusion Team January 30, 2023 07:38 AM UTC

Hi Gobi,


  1. Can you ensure you have enabled static web assets usage.

https://blazor.syncfusion.com/documentation/appearance/themes#enable-static-web-assets-usage

  1. Are you using Syncfusion.Blazor (single NuGet) or individual NuGets based on the controls you are using?

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



GO gopichandar February 8, 2023 05:23 PM UTC

Hi  Sivakumar, Im still having issues.  Please refer the attached project for reference. 


Attachment: SFGetStarted_307af2c3.zip


BH BharatRam Harikrishnan Syncfusion Team February 10, 2023 01:38 PM UTC

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


Loader.
Up arrow icon