ngx-monaco-editor：無法從 node_modules 找到 loader.js 文件

Question

我想在我的項目中包含 ngx-monaco-editor 以在前端創建一個類似計算器的屏幕，該屏幕顯示用戶單擊相應按鈕時輸入的文本。

我已經安裝了 ngx-monaco-editor（版本 6.0.0）。

依賴項已包含在 app.module.ts 中，我已將 glub 添加到 angular.json 文件中的資產中。

app.component.hlml ：

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

app.component.ts ：

editorOptions = {theme: 'vs-dark', language: 'javascript'};
code: string= 'function x() {\nconsole.log("Hello world!");\n}';

編輯器沒有被渲染。 相反，我收到一個錯誤，即找不到我的 loader.js 文件。

http://localhost:4200/assets/monaco/vs/loader.js net::ERR_ABORTED 404（未找到）@base-editor.js:65

loader.js 文件位於 node_modules/ngx-monaco-editor/assets/monaco/vs/loader.js ，我可以導航到它。

錯誤發生在 base-editor.js，第 65 行。此文件的位置是 node_modules/ngx-monaco-editor/base-editor.js

Answer 1

10.0.0 中沒有資產文件夾，但在 9.0.0 版本中有我使用它並且它有效。

Answer 2

ngx-monaco-editor需要monaco-editor

1. 安裝 monaco-editor： npm install monaco-editor

2. 在 angular.json 中的projects>architect>options>assets下添加一個條目：

{ "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor" }

Answer 3

更改 angular.json 中的輸入配置可以將文件復制到 dist 文件夾。 更改輸出配置允許找到 loader.json 文件。