我正在尝试设置 BlazorMonaco 编辑器，但我不断收到错误：
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'u1AmXKcme53TZumhysV_MenrWwA9xjflVubUoLRRQzk'.
Microsoft.JSInterop.JSException: monaco is not defined
ReferenceError: monaco is not defined
检查编译后的 JavaScript，问题似乎出在
_content/BlazorMonaco/lib/monaco-editor/min-maps/vs/out-editor/vs/loader.jsproperties of undefined (reading 'define')
at loader.js:1961:33
at loader.js:1973:13
指向 loader.js 中的这一行：
if (typeof AMDLoader.global.define !== 'function' || !AMDLoader.global.define.amd) {
代码：
我按照 BlazorMonaco GitHub 存储库中说明的步骤进行操作。我实施的步骤摘要：
已将 NuGet 包安装到项目中。
在 HTML 中添加脚本标签
<head><script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
.razor@using BlazorMonaco
@using BlazorMonaco.Editor
<h3>Code Editor</h3>
<StandaloneCodeEditor @ref="_editor" Id="sample-code-editor-123" ConstructionOptions="EditorConstructionOptions" />
@code {
private StandaloneCodeEditor _editor = null!;
private string _valueToSet = "";
private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
{
return new StandaloneEditorConstructionOptions
{
Language = "javascript",
GlyphMargin = true,
Value = "\"use strict\";\n" +
"function Person(age) {\n" +
" if (age) {\n" +
" this.age = age;\n" +
" }\n" +
"}\n" +
"Person.prototype.getAge = function () {\n" +
" return this.age;\n" +
"};\n"
};
}
}
我找不到任何有关发生此错误的原因的信息。看来我们需要某种
Monaco我们成功解决了这个错误。步骤 2 中出现问题之一，更正的方法是将脚本标记（请参阅步骤 2）添加到 HTML
<body><head>blazor.webassembly.js换句话说，您的
<body>wwwroot/index.html<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</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>
<!-- Loading modules for BLAZOR MONACO -->
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
</body>
正如 @ViRuSTriNiTy 提到的，该错误是由于在我们现有项目中实现 Monaco 编辑器时发生的副作用造成的。我们的项目中也有 ag-grid，最初使用 cdn 链接将 ag-grid 导入 JavaScript 文件。
import "https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.js";
import "https://cdn.jsdelivr.net/npm/ag-grid-enterprise/dist/ag-grid-enterprise.js";
将 ag-grid 和 BlazorMonaco 作为我们项目的一部分，出现错误：
Microsoft.JSInterop.JSException: Can only have one anonymous define call per script file
将
<script><head>wwwroot/index.html<!-- Loading modules for AG GRID -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ag-grid-enterprise.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>