Problem with conuming blazor custom element through another webApp!

Hamed Vaziri 136

Hi everyone ..

To implement blazor server custom element that consume in a simple webApp, i've follow these steps :

Create simple blazor server project with .net 7.0
Register counter as custom element
Enable CORS on blazor project
Set autostart to false for script tag in _Host.cshtml like this : <script src="_framework/blazor.server.js" autostart="false"></script>
Publish our blazor server project to local iis (this sample webSite can access through this address : http://localhost/CustomElements).
Create a simple html file & add these lines :

   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Custom Elements Consuming Sample</title>
   
       <link rel="stylesheet" href="http://localhost/CustomElements/css/site.css">
       <link rel="stylesheet" href="http://localhost/CustomElements/CustomEelementSample01.styles.css">
   
   </head>
   <body>
       
       <h3>Hi Custom Elements!</h3>
       <hr />
       <my-counter />
       
       <script src="http://localhost/CustomElements/_framework/blazor.server.js"></script>
       <script src="http://localhost/CustomElements/_content/Microsoft.AspNetCore.Components.CustomElements/Microsoft.AspNetCore.Components.CustomElements.lib.module.js"></script>
       <script>
           Blazor.start();
       </script>
   
   </body>
   </html>

Create new webSite in iis with html file that created in step 6 (this sample webSite can access through this address : http://localhost/CustomElementConsumer/CustomElementsConsuming.html)
Open consumer web site which created in step 7. You will see the counter component was not shawn! If you check console, You will see this errors :

GET http://localhost/CustomElementConsumer/_blazor/initializers

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

What's problem & how to solve it?

Thanks in advance

Zhi Lv - MSFT 32,006 Reputation points Microsoft Vendor

2023-02-08T08:57:19.6266667+00:00

Hi @Hamed Vaziri

I can reproduce the problem on my side. The issue relates the http://localhost/CustomElements/_framework/blazor.server.js file, in this file, it will send a fetch request to initialize the JS. Since the blazor.server.js located in the CustomElements site, the request url should be http://localhost/CustomElements/_blazor/initializers, but at present the url is http://localhost/CustomElementConsumer/_blazor/initializers, so it will show the 404 error.

But unfortunately, I didn't find any resource about this error, I suggest you could submit this issue on aspnetcore Github forum and let them check whether it is a build-in error or not and if there any workaround.
Hamed Vaziri 136 Reputation points

2023-02-08T13:57:14.8866667+00:00

Hi Zhi Lv

Ok, Thanks ..