monator-editor 开源仓库

https://github.com/miki995/ngx-monaco-editor-v2

虽然，仓库提供了教程，但是依据教程似乎无法在angular20（无模块）情况下很好地使用，尽管组件的渲染并没有问题，但是在控制台中会有错误的输出。

结合下面的issue我在我的程序中解决了这个问题。

http://github.com/microsoft/monaco-editor/issues/4778

首先，

安装的版本是

"ngx-monaco-editor-v2": "^20.0.0",

同时需要调整angular常规库的版本为20.1.2

app.config.ts

export const monacoConfig: NgxMonacoEditorConfig = {
    baseUrl: window.location.origin + "/assets/monaco/min/vs",
    defaultOptions: { scrollBeyondLastLine: false },
    onMonacoLoad: () => { console.log((<any>window).monaco); }, // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.
    requireConfig: { preferScriptTags: true }, // allows to oweride configuration passed to monacos loader
    monacoRequire: (<any>window).monacoRequire // pass here monacos require function if you loaded monacos loader (loader.js) yourself
};

export const appConfig: ApplicationConfig = {
    providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    provideNoopAnimations(),
    provideMonacoEditor(monacoConfig),
]
};

angular.json

其中28~30(和仓库教程略微不一样，两者均可以）