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.

appponent.hlml :

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

appponent.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

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.ponent.hlml :

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

app.ponent.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

• javascript
• angular
• angular6
• monaco-editor

3 Answers 3

There is no asset folder in 10.0.0 but there is in version 9.0.0 I use it and it worked.

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" }

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.