CODEWITHSUNDEEP
javascriptangularangular6monaco-editor
Arshdeep Singh Sandhu
Arshdeep Singh Sandhu

Reputation: 93

ngx-monaco-editor : unable to find loader.js file from node_modules

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

Upvotes: 7

Views: 5876

Answers (3)

Thyagarajan C
Thyagarajan C

Reputation: 8213

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

Upvotes: 2

shadcome
shadcome

Reputation: 61

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

Upvotes: 2

Arshdeep Singh Sandhu
Arshdeep Singh Sandhu

Reputation: 93

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.

Upvotes: -2

Related Questions