CODEWITHSUNDEEP
javascriptangularangularjsmonaco-editorngx-monaco-editor
Rodney Mupanduki
Rodney Mupanduki

Reputation: 146

Im trying to use ngx-monaco-editor to show an in browser code editor but its not showing

Here is my component.html code

<div style="height: 500px">
    <ngx-monaco-editor style="height: 100%" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>

Here is my component.ts files

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

Here is my app.module

import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';

const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: 'app-name/assets', // configure base path cotaining monaco-editor directory after build default: './assets'
  defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used
  onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.
};

@NgModule({
  ...
  imports: [
    ...
    MonacoEditorModule.forRoot(monacoConfig)
  ],
})
export class AppModule {}

From my browser the following error is logged in the browser

enter image description here

I have been on this for quite some time and cant seem to figure out why its not working

Upvotes: 1

Views: 1183

Answers (1)

VENKATESH CHAVVAKULA
VENKATESH CHAVVAKULA

Reputation: 323

Need to update the following in angular.json (build)

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

Upvotes: 1

Related Questions