Encountering a 404 error when utilizing ngx-monaco-editor within an Angular application

I have been encountering an issue while attempting to utilize the editor within my Angular 8 application. Despite researching similar errors on Stack Overflow and GitHub discussions, I haven't found a solution yet. Here's how my angular.json assets section looks like:

"assets": [
              { 
                "glob": "**/*",
                "input": "node_modules/ngx-monaco-editor/assets/monaco",
                "output": "./assets/monaco/" 
              },
              "src/favicon.ico",
              "src/assets"

            ]

In my app.module.ts file, I have included:

MonacoEditorModule.forRoot()

And in my component, the following code is present:

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

However, upon trying to run the page, I encounter this error message: GET http://localhost:4200/assets/monaco/vs/loader.js net::ERR_ABORTED 404 (Not Found) ngx-monaco-editor.js:76

javascriptangulartypescriptmonaco-editor

Answer №1

Have you properly initialized the Element in your HTML code? I encountered a similar issue and was able to resolve it by including the following code in ngx-monaco.

<ngx-monaco-editor [options]="{ theme: 'vs-dark', language: 'mylang' }" (ngModelChange)="changes($event)" [(ngModel)]="_code" (init)="onInitEditor($event, 'largeEditor')">
</ngx-monaco-editor>

In the TypeScript file:

 async onInitEditor(editor, editorId) {
    this.editorRef[editorId] = editor;}

UPDATE: Make sure to initialize the library itself as it is a property of ngx-monaco-editor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Each time the button is clicked, the settings and values will rotate, creating a new

I'm looking to create a button system that transitions from "unmarked" to "form" and updates the database with each click. I want users to be able to cycle through the buttons, triggering a post request via ajax to update the associated ID in the data ...

javascriptjqueryajax

Angular login issue: Error message - Correlation failed. Location not recognized

My application consists of two main elements: An IdentityServer4 host (Asp.NET Core 2.2 application with Asp.NET identity) running on http://localhost:5000 An Angular client app (Angular v7.2.12) operating on http://localhost:5002 The goal is to have the ...

c#angularidentityserver4openid-connect

The magic of $.ajax lies in its ability to load an unexpected URL, diverging from my original

Every time I send a request using an absolute URL, Ajax is posting the wrong URL. For instance, when I request "http://localhost/app/home/session", it mistakenly calls "http://localhost/app/home/home/session" var baseURL = function(link) { var url = & ...

javascriptjqueryajax

simulating the use of `usePrompt` in react-router-dom version 6

Prompt.js import { unstable_usePrompt as usePrompt } from 'react-router-dom'; // eslint-disable-next-line react/prop-types export default function CustomPrompt({ when, message }) { usePrompt({ when, message }); return null; } CustomPrompt.t ...

javascriptreactjsjestjsreact-router-domreact-test-renderer

I'm curious as to why the for-of loop within the function isn't producing the anticipated results that the regular for loop is achieving

Why is the behavior of the for...of loop different from the traditional for loop within this function? It appears that the 'el' in the for...of loop does not behave the same as iterable[i] in the regular for loop? var uniqueInOrder = function(it ...

javascriptfor-loopfor-of-loop

Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

While working with reactive forms, I encountered an issue where accessing the same control in multiple inputs seemed to result in one-way data binding (input-to-model). If I make edits in one input, it updates the model correctly but does not refresh the o ...

javascriptangulartypescriptdata-bindingangular-reactive-forms

Can I find a better approach to optimize this code?

How can I refactor this code to move the entire DB query logic into a separate file and only call the function in this current file? passport.use( new GoogleStrategy({ clientID: googleId, clientSecret: clientSecret, callbackURL: ...

javascriptnode.jsmongodbmongoose-schema

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

javascriptjqueryhtmlcss

Expanding functions consist of numerous components

How can I modify this script to work on multiple elements? For example, if a user clicks on a specific link (see demo) labeled "I'd like to expand the article linked here", only that particular link should expand an element, not all like it currently ...

javascriptjquery

Enhance your browsing experience with Fire-fox add-on that automatically triggers JavaScript after YouTube comments have

I am currently working on creating an add-on for the Firefox browser. I have implemented a page-mod that triggers a script when specific pages (such as Youtube) are loaded, allowing it to communicate data back to the main script. However, I am encountering ...

javascripthtmlajaxfirefox-addon

Updating React state from another component - using useState

How can I efficiently update this state in React so that it changes when a specific button is clicked within the <FirstPage /> component? I'm struggling with finding the best approach to accomplish this. Any suggestions? const SignUp = () => ...

javascriptreactjsreact-hooks

Modify the row's background color after clicking the delete button with jquery

Greetings, I am facing an issue with changing the color of a row in a table when clicking on a delete button. Despite trying various methods, I have not been successful. How can I modify the ConfirmBox() method to change the row's color? Your assistan ...

javascriptc#jqueryasp.netdatatable

Client-side validation with Jquery is failing to function properly

Currently, I am experimenting with the jquery.validate.unobtrusive.js plugin to dynamically generate form fields. Here is an example of how I'm creating a textarea field: var message = $("<textarea id='test'></textarea>"); $(mes ...

javascriptjqueryasp.net-mvc-3

Linking model attribute to checkbox in AngularJs

Currently, I am working on assigning tags during post creation. For this purpose, I have set up a Post model with the following structure: var mongoose = require('mongoose'); var PostsSchema = { title: String, content: String, poste ...

javascriptangularjscheckboxmean-stack

The null object does not have a property addEvenListener and therefore cannot be

My goal is to develop a simple single-page application without using any frameworks, focusing on providing users with tutorials on specific subjects. I am encountering an issue with the javascript code for my page, receiving the following error: Uncaug ...

javascriptjsonajax

Utilize the push method to form a new array

var teamMembers = [ ['John D. Adams', '1959-1967', 'Ohio'], ['Dawson Mathis', '1971-1981', 'Georgia'], ]; To generate this dynamically, I am implementing the code below: var data = ne ...

javascriptarrays

What could be causing the lack of Tailwind CSS intellisense in a Next.js app with TypeScript?

Check out my tailwind.config.ts file I've been trying to figure it out by watching YouTube tutorials, but nothing seems to be working. Even with the tailwind.config.ts file in my Next.js app, it still isn't functioning properly. Perhaps there&ap ...

typescriptnext.jstailwind-cssintellisense

utilizing object methods to retrieve object attributes

I am currently working on developing a new application named myApp. This application includes a property called regularNameErrors and a method called populateJSON. The populateJSON method utilizes an AJAX call to retrieve a JSON object, which is then added ...

javascriptjqueryajaxobject

Enhance your websites' search functionality with jQuery autocomplete using AJAX

I am attempting to implement dynamic autocomplete values for a text box. Here is my solution: echo json_encode($res) 0: {type_name: "name1"} 1: {type_name: "name2"} 2: {type_name: "name3"} 3: {type_name: "name4"} 4: {type_name: "name5"} Below is the co ...

javascriptphpjqueryajaxjson

React JS does not allow TextField and Select to change

I am relatively new to full stack development and I am currently working on a project to enhance my understanding of frontend development with React JS. While working on this project, I have been using Redux without any issues so far. However, I am facing ...

javascriptreactjsreact-reduxmaterial-ui