The version of OpenSilver that you are referencing (2.2 or newer) requires the migration of your project.

Your project has been updated to use a newer version of OpenSilver, which includes several enhancements. However, this update also introduces some minor breaking changes that necessitate migrating your project. To facilitate this, please follow the straightforward steps outlined below. Alternatively, you may opt to initiate a new project using the latest VSIX, which features updated project templates.

1. Open the .CSPROJ of the project that has the “.Browser” suffix (to do so, you can just double-click on the project name from the Solution Explorer), and make the following changes:

Find <OpenSilverType>5</OpenSilverType> and replace it with <OpenSilverType>6</OpenSilverType>

2. Make sure that all the packages referenced by your projects have the same version, as shown in the screenshot below.

3. In the project which has the “.Browser” suffix, open the file Pages/Index.cs, and replace the following code:

				
					        protected override void OnInitialized()
        {
            base.OnInitialized();
            Cshtml5Initializer.Initialize(new UnmarshalledJavaScriptExecutionHandler(JSRuntime));
            Program.RunApplication();
        }

with this new one:

				
					protected async override Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
 
    if (!await JSRuntime.InvokeAsync<bool>("getOSFilesLoadedPromise"))
    {
        throw new InvalidOperationException("Failed to initialize OpenSilver. Check your browser's console for error details.");
    }
 
    Cshtml5Initializer.Initialize(new UnmarshalledJavaScriptExecutionHandler(JSRuntime));
    Program.RunApplication();
}

4. In the project which has the “.Browser” suffix, open the file wwwroot/index.html, and replace the whole content with the one below (note: remember to change <title>):

				
					<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>----REMEMBER TO CHANGE THIS TITLE----</title>
    <base href="/" />
    <script>
        (function () {
            const style = document.createElement('link');
            style.setAttribute('rel', 'stylesheet');
            style.setAttribute('type', 'text/css');
            style.setAttribute('href', 'loading-indicator.css?date=' + new Date().toISOString());
            document.head.appendChild(style);
            const script = document.createElement('script');
            script.setAttribute('type', 'application/javascript');
            script.setAttribute('src', 'libs/opensilver.js?date=' + new Date().toISOString());
            document.head.appendChild(script);
        })();
    </script>
</head>
<body>
    <div id="app">
        <div class="loading-indicator-wrapper">
            <div class="loading-indicator">
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-ball"></div>
                <div class="loading-indicator-text"></div>
            </div>
        </div>
    </div>
    <div id="opensilver-root" style="position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden"></div>
    
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

5. Lastly, in the project which has the “.Browser” suffix, open the file wwwroot/loading-indicator.css, and replace the whole content with the one from this link.


New VSIX (optional):

We encourage you to download the updated Visual Studio Extension (.VSIX), which includes many enhancements, such as:

 

Need help?

If you have any questions, please contact us :

Contact Us