Multi-layered Blazor WebAssembly template solution (.Net 5.0) doesn't work in Azure

Question

I've created Blazor WebAssembly solution from the template in VS2019 (target framework is .Net 5.0) and tried to run without making any changes. It runs fine locally. But being published to Azure App Service the app can't register service worker and can't open "fetchdata" page. Those are errors I could see in browser console:

Uncaught TypeError: navigator.serviceWorker is undefined

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: ExpectedStartOfValueNotFound, < Path: $ | LineNumber: 0 | BytePositionInLine: 0.
System.Text.Json.JsonException: ExpectedStartOfValueNotFound, < Path: $ | LineNumber: 0 | BytePositionInLine: 0.
 ---> System.Text.Json.JsonReaderException: ExpectedStartOfValueNotFound, < LineNumber: 0 | BytePositionInLine: 0.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
   at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first)
   at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
   at System.Text.Json.Utf8JsonReader.Read()
   at System.Text.Json.Serialization.JsonConverter`1[[BlazorApp1.Shared.WeatherForecast[], BlazorApp1.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   Exception_EndOfInnerExceptionStack
   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
   at System.Text.Json.Serialization.JsonConverter`1[[BlazorApp1.Shared.WeatherForecast[], BlazorApp1.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[WeatherForecast[]](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[WeatherForecast[]](JsonReaderState& readerState, Boolean isFinalBlock, ReadOnlySpan`1 buffer, JsonSerializerOptions options, ReadStack& state, JsonConverter converterBase)
   at System.Text.Json.JsonSerializer.<ReadAsync>d__20`1[[BlazorApp1.Shared.WeatherForecast[], BlazorApp1.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpContentJsonExtensions.<ReadFromJsonAsyncCore>d__3`1[[BlazorApp1.Shared.WeatherForecast[], BlazorApp1.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpClientJsonExtensions.<GetFromJsonAsyncCore>d__9`1[[BlazorApp1.Shared.WeatherForecast[], BlazorApp1.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at BlazorApp1.Client.Pages.FetchData.OnInitializedAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

What could be wrong here? What is the difference in running Blazor locally and in Azure?

Answer 1

It is recommand to recreate a sample project then deploy.

Update

Suggestion

1. Upgrade your vs2019 to lastest.

2. Choose .Net 5.0 .

3. If the problem still exists, it is recommended to replace a resource group or region for testing. If the problem no longer occurs, it is recommended to raise a support for help.

1. Create project.

2. Deploy and test.

Answer 2

In my case I was having some paths in my controller pointing to images. For example I was pointing to "default" images should be used in user profiles. This was working on my localhost environment, but was dropping exceptions on Azure as Azure server was not able to find these images in specified paths. This was leading to JSON exceptions mentioned in original Question above.

For example I used:

System.IO.File.ReadAllBytes(
        string.Concat(this.WebHostEnvironment.ContentRootPath, "\\images\\avatar.png"));

it should have been:

System.IO.File.ReadAllBytes(
   Path.Combine(this.WebHostEnvironment.WebRootPath, "images", "avatar.png")); 

However this is not my main point of answer. Main point is how to find these exceptions on Azure server.

The key is to use Log Stream! Just setup your Log Stream in "App Service Logs" and then go to "Log Stream" to see any error messages appearing. It will point you towards any problems to be fixed during execution.