Angular 18集成Monaco Editor核心功能失效问题求助

你的问题核心是Monaco的语言Worker加载失败，Angular 18基于Vite构建，原配置中直接返回相对路径的方式无法正确加载Worker文件，而高亮、智能提示、命令面板（F1）等核心功能完全依赖对应语言的Worker。以下是修复方案：

1. 调整Worker加载配置 #

替换原有的getWorkerUrl配置，改用直接导入Worker模块并创建实例的方式，Vite会自动处理Worker的打包和加载：

import { Component, OnDestroy, AfterViewInit } from '@angular/core';
import * as monaco from 'monaco-editor';
// 导入各语言Worker，?worker是Vite的Worker加载语法
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

@Component({
  selector: 'app-code-editor',
  templateUrl: './code-editor.component.html',
  styleUrl: './code-editor.component.scss',
})
export class CodeEditorComponent implements AfterViewInit, OnDestroy {
  private editorInstance?: monaco.editor.IStandaloneCodeEditor;

  ngAfterViewInit() {
    // 配置Monaco环境，指定Worker实例
    self.MonacoEnvironment = {
      getWorker(_, label) {
        switch (label) {
          case 'json':
            return new jsonWorker();
          case 'css':
          case 'scss':
          case 'less':
            return new cssWorker();
          case 'html':
          case 'handlebars':
          case 'razor':
            return new htmlWorker();
          case 'typescript':
          case 'javascript':
            return new tsWorker();
          default:
            return new editorWorker();
        }
      }
    };

    const element = document.getElementById('container');
    if (element) {
      this.editorInstance = monaco.editor.create(element, {
        value: ['function x() {', '  console.log("Hello world!");', '}'].join('\n'),
        language: 'javascript',
        theme: 'vs-dark' // 可选，可根据需求切换主题
      });
    }
  }

  // 组件销毁时销毁编辑器，避免内存泄漏
  ngOnDestroy() {
    this.editorInstance?.dispose();
  }
}

2. 验证依赖与构建配置 #

• 确保已安装monaco-editor：

  npm install monaco-editor
  

• 若使用TypeScript，可安装类型定义（可选）：

  npm install -D @types/monaco-editor
  

3. 检查容器样式 #

确认你的容器元素有正确的尺寸，原代码中的h-[50vh]是Tailwind CSS类，若未启用Tailwind，可改用原生CSS设置高度：

<div id="container" style="height: 50vh; width: 100%;"></div>

修复原理 #

Monaco Editor的核心功能（语法高亮、智能提示、命令面板）依赖于独立的语言Worker进程，原配置中返回的相对路径在Vite构建环境下无法正确指向Worker文件，导致Worker加载失败，功能失效。改用Vite的Worker加载语法直接导入Worker模块，可确保构建工具正确打包并加载Worker文件。

内容的提问来源于stack exchange，提问作者MaRvZ