blazor-webassembly - 异常渲染组件

问题描述

根据说明创建了一个 Web-Assembly 项目并将 Blazorize 添加到我的项目中，它可以正常工作。添加此组件Addon后发生运行时异常：

<Addons>
    <Addon AddonType="AddonType.Start">
        <AddonLabel>@@</AddonLabel>
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextEdit Placeholder="Username" />
    </Addon>
</Addons>

它在页面上呈现

但调试输出报告此异常：

Unhandled exception rendering component: Could not find 'blazorise.textEdit.initialize' ('blazorise' was undefined).
  Error: Could not find 'blazorise.textEdit.initialize' ('blazorise' was undefined).
      at http://localhost:5000/_framework/blazor.webassembly.js:1:288
      at Array.forEach (<anonymous>)
      at r.findFunction (http://localhost:5000/_framework/blazor.webassembly.js:1:256)
      at w (http://localhost:5000/_framework/blazor.webassembly.js:1:2414)
      at http://localhost:5000/_framework/blazor.webassembly.js:1:3267
      at new Promise (<anonymous>)
      at Object.beginInvokeJSFromDotNet (http://localhost:5000/_framework/blazor.webassembly.js:1:3248)
      at Object.ut [as invokeJSFromDotNet] (http://localhost:5000/_framework/blazor.webassembly.js:1:53981)
      at _mono_wasm_invoke_js_blazor (http://localhost:5000/_framework/dotnet.6.0.0-preview.7.21377.19.js:1:191287)
      at <anonymous>:wasm-function[2545]:0x7e724

为什么？

代码

索引.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>STRTRK.App</title>
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="STRTRK.App.Client.styles.css" rel="stylesheet" />
<!--Blazorize-->  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

  <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
  <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

身体

<body>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
    <script src ="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src ="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src ="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    <script src ="_content/Blazorise/blazorise.js"></script>

_Imports.razor

...
@using Blazorise
...

程序.cs

builder.Services
       .AddBlazorise(options => { options.ChangeTextOnKeyPress = true;})
       .AddBootstrapProviders()
       .AddFontAwesomeIcons();

builder.Services.AddSingleton
    (new HttpClient {
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
    });