我正在嘗試使用 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" }
            ],
    ```