No Provider for InjectionToken in embedding ngx-monaco-editor

Discussão em 'Angular' iniciado por Dave Cordero, Fevereiro 16, 2025.

  1. Dave Cordero

    Dave Cordero Guest

    I'm trying to embed Monaco Editor to a web application I'm working on using this guide https://github.com/atularen/ngx-monaco-editor#readme. I tried adding the ngx-monaco-editor tag and Angular gives me this error. Any ideas on how to resolve this?

    ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(EditorModule)[InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG]:
    NullInjectorError: No provider for InjectionToken NGX_MONACO_EDITOR_CONFIG!
    NullInjectorError: R3InjectorError(EditorModule)[InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG]:
    NullInjectorError: No provider for InjectionToken NGX_MONACO_EDITOR_CONFIG!
    at NullInjector.get (core.js:915)
    at R3Injector.get (core.js:11082)
    at R3Injector.get (core.js:11082)
    at R3Injector.get (core.js:11082)
    at NgModuleRef$1.get (core.js:24199)
    at R3Injector.get (core.js:11082)
    at NgModuleRef$1.get (core.js:24199)
    at Object.get (core.js:22102)
    at getOrCreateInjectable (core.js:3921)
    at Module.ɵɵdirectiveInject (core.js:13753)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)


    This is my component.ts

    import {Component, OnInit} from '@angular/core';



    @Component({
    selector: 'app-text-editor',
    templateUrl: './text-editor.component.html',
    styleUrls: ['./text-editor.component.scss']
    })
    export class TextEditorComponent implements OnInit {

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

    constructor() {
    }

    ngOnInit() {
    }
    }



    I already solved the glob directory issues by installing v9.0.0 but this error really got me stuck for quite sometime now.

    EDIT Resolved by adding .forRoot to AppModule Import. My Bad! I thought I already added it

    Continue reading...

Compartilhe esta Página