WebAssembly Blazor .NET 6.0 未检索 MudBlazor 样式 - 找不到'mudElementRef.getBoundingClientRect'

Question

我创建了一个PWA，并希望使用MudBlazor作为UI，从MudBlazor模板中获取代码"Wasm-PWA"项目。到目前为止，我已经尝试了Chrome和Edge，将MudBlazor模板项目与我自己的PWA项目区别开来，无法发现差异。我也试过删除广告拦截，但没有成功。

PWA缺少Mudblazor样式

页面错误是:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
at https://localhost:44368/_framework/blazor.webassembly.js:1:328
at Array.forEach (<anonymous>)
at a.findFunction (https://localhost:44368/_framework/blazor.webassembly.js:1:296)
at _ (https://localhost:44368/_framework/blazor.webassembly.js:1:2437)
at https://localhost:44368/_framework/blazor.webassembly.js:1:3325
at new Promise (<anonymous>)
at Object.beginInvokeJSFromDotNet (https://localhost:44368/_framework/blazor.webassembly.js:1:3306)
at Object.St [as invokeJSFromDotNet] (https://localhost:44368/_framework/blazor.webassembly.js:1:59849)
at _mono_wasm_invoke_js_blazor (https://localhost:44368/_framework/dotnet.6.0.4.p3odw0yl22.js:1:195300)
at wasm://wasm/00970c26:wasm-function[219]:0x1a0fb
Microsoft.JSInterop.JSException: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
at https://localhost:44368/_framework/blazor.webassembly.js:1:328
at Array.forEach (<anonymous>)
at a.findFunction (https://localhost:44368/_framework/blazor.webassembly.js:1:296)
at _ (https://localhost:44368/_framework/blazor.webassembly.js:1:2437)
at https://localhost:44368/_framework/blazor.webassembly.js:1:3325
at new Promise (<anonymous>)
at Object.beginInvokeJSFromDotNet (https://localhost:44368/_framework/blazor.webassembly.js:1:3306)
at Object.St [as invokeJSFromDotNet] (https://localhost:44368/_framework/blazor.webassembly.js:1:59849)
at _mono_wasm_invoke_js_blazor (https://localhost:44368/_framework/dotnet.6.0.4.p3odw0yl22.js:1:195300)
at wasm://wasm/00970c26:wasm-function[219]:0x1a0fb
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[MudBlazor.Interop.BoundingClientRect, MudBlazor, Version=6.0.6.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at MudBlazor.MudDrawer.UpdateHeight()
at MudBlazor.MudDrawer.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
window.Module.s.printErr @ blazor.webassembly.js:1
Fe._internal.dotNetCriticalError @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.4.p3odw0yl22.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.4.p3odw0yl22.js:1
_js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
receiveHotReload @ blazor-hotreload.js:2
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.4.p3odw0yl22.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.4.p3odw0yl22.js:1
_js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
Fe._internal.getSatelliteAssemblies @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
_call_method_with_converted_args @ dotnet.6.0.4.p3odw0yl22.js:1
call_method @ dotnet.6.0.4.p3odw0yl22.js:1
(anonymous) @ dotnet.6.0.4.p3odw0yl22.js:1
call_assembly_entry_point @ dotnet.6.0.4.p3odw0yl22.js:1
callEntryPoint @ blazor.webassembly.js:1
At @ blazor.webassembly.js:1
await in At (async)
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
aspnetcore-browser-refresh.js:234 WebSocket connection to 'wss://localhost:58396/LmnMb/' failed: Error in connection establishment: net::ERR_CONNECTION_RESET

Answer 1

您的Index.Html文件不指向MudBlazor的。css文件和。js文件。

你可以在example/template的wwwroot文件夹下的index.html文件中找到这些。

您应该在索引文件中添加突出显示的引用:

在未来，你可以使用MudBlazor模板来轻松地启动正确的nuget包，服务等…已安装并配置

Answer 2

我得到这个错误，并正确地引用了MudBlazor文件，但是我留下了Bootstrap文件。删除Bootstrap文件后，我不再有这个问题。

我删除:

• 在index.html
中的Bootstrap样式表引用
• Bootstrap和Open icon文件夹及其内容(在wwwroot/css下)
• app.css文件(wwwroot/css下)

Answer 3

您所要做的就是在Program.cs管道中的构建器下添加AddMudServices() -在顶部的构建器下。

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddMudServices();

Answer 4

在之前添加Mudblazor.

<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>