ngx-monaco-editor：无法从 node_modules 找到 loader.js 文件

Question

I want to include ngx-monaco-editor in my project to create a calculator-like screen on the front-end which shows the text entered as the user clicks on the corresponding buttons.

I have installed ngx-monaco-editor (version 6.0.0) for the same.

The dependencies have been included in app.module.ts and I have added the glub to assets in the angular.json file.

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}';

The editor is not getting rendered. I'm instead getting an error that my loader.js file is not getting found.

http://localhost:4200/assets/monaco/vs/loader.js net::ERR_ABORTED 404 (Not Found) @base-editor.js:65

The loader.js file is located at node_modules/ngx-monaco-editor/assets/monaco/vs/loader.js and I'm able to navigate to it.

The error is occuring at base-editor.js, line 65. The location for this file is node_modules/ngx-monaco-editor/base-editor.js

Answer 1

10.0.0 中没有资产文件夹，但在 9.0.0 版本中有我使用它并且它有效。

Answer 2

ngx-monaco-editor requires monaco-editor

1. Install monaco-editor: npm install monaco-editor

2. Add a entry under projects>architect>options>assets in angular.json:

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

Answer 3

Changing the input configuration in angular.json enabled the files to be copied over to the dist folder. Changing the output configuration allowed the loader.json file to be found.