在angular20中使用monaco-editor

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 loadermonacoRequire: (<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(和仓库教程略微不一样，两者均可以）