CODEWITHSUNDEEP
websocketblazorblazor-server-sidecustom-element.net-7.0
Navin Vinayagam
Navin Vinayagam

Reputation: 133

Blazor Custom element not working with Blazor Server and Angular

I created an app using Angular with ASP.Net core project template to work with Blazor Custom Elements in Blazor Server. I created the component and registered it as a custom element as suggested in the official documentation. I added the proxy config and other changes for angular by referring to ring the asp labs sample.

When I ran the sample I faced the below issue and the custom element is not working as expected. Angular sample output and the error message

[webpack-dev-server] Live Reloading enabled.
blazor.server.js:1 WebSocket connection to 'wss://localhost:44476/_blazor?id=gxW6SsA09YwNC2qyxoqguw' failed: 
(anonymous) @ blazor.server.js:1
blazor.server.js:1 [2023-01-13T18:51:43.964Z] Information: (WebSockets transport) There was an error with the transport.
blazor.server.js:1 [2023-01-13T18:51:43.967Z] Error: Failed to start the transport 'WebSockets': Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.

Here is my sample repo

It seems I am missing something, how can I resolve the error and get the custom element working?

As Astrid suggested in the comments, I am attaching the details of all the codes I have added to the angular with a core project template.

Added Custom elements NuGet in AngularWithCore.csProj

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.CustomElements" Version="7.0.2" />
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.1" />
  </ItemGroup>

Created Counter.razor and added under AngularWithCore/Pages/Counter.razor

<h1>@Title</h1>

<p role="status">Current count: @currentCount</p>
<p>Increment amount: @IncrementAmount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private DateTime date = DateTime.Today;

    [Parameter] public string Title { get; set; } = "Blazor Counter";
    [Parameter] public int? IncrementAmount { get; set; }

    private void IncrementCount()
    {
        currentCount += IncrementAmount.GetValueOrDefault(1);
    }
}

Added Blazorhub, razor pages, server-side blazor in the Program.cs and registered Counter as custom element

var builder = WebApplication.CreateBuilder(args);


builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterCustomElement<Counter>("my-blazor-counter");
});

var app = builder.Build();
app.MapBlazorHub();

Updated the Proxy config in client app

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:6937';

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
      "/_content",
      "/_framework",
      "/_blazor"
   ],
    target: target,
    secure: false,
    ws: true,
    logLevel: "debug",
    headers: {
      Connection: 'Keep-Alive'
    }
  }
]

module.exports = PROXY_CONFIG;

Added Blazor script Index.HTML in the client app

<head>
  <meta charset="utf-8" />
  <title>AngularWithCore</title>
  <base href="/" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <script src="_content/Microsoft.AspNetCore.Components.CustomElements/Microsoft.AspNetCore.Components.CustomElements.lib.module.js"></script>
  <script src="_framework/blazor.server.js"></script>
</head>

Added Blazor custom element in the angular page

<h1>Blazor Counter </h1>
<my-blazor-counter increment-amount=4></my-blazor-counter>

Upvotes: 0

Views: 685

Answers (1)

Navin Vinayagam
Navin Vinayagam

Reputation: 133

Removing the keep-alive header from the proxy did the trick and resolved the issue. Thanks for the solution provided by the dotnet team in issue - 46091 .

I have updated my repo with the solution.

Here is the updated proxy config which resolved the issue.

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
      "/_content",
      "/_framework",
      "/_blazor",
    ],
    proxyTimeout: 3000,
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  },
  {
    context: [
      "/_blazor"
    ],
    target: target,
    secure: false,
    ws: true,
    logLevel: "debug"
  }
];

Upvotes: 0

Related Questions