我正在尝试使用 ngx-monaco-editor 来显示浏览器代码编辑器，但它没有显示

Question

这是我的 component.html 代码

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

这是我的 component.ts 文件

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

这是我的 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 {}

在我的浏览器中，浏览器中记录了以下错误

我已经在这上面工作了很长一段时间，似乎无法弄清楚为什么它不起作用

Answer 1

angular.json（build）中需要更新以下内容

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