如何将 monaco-editor 正确集成到 Angular 应用程序中？

Question

摩纳哥编辑器集成有两种常见方式：

1. 集成AMD版本
2. 整合ESM版本

由于 angular-cli 在底层使用 webpack 似乎我应该使用 ESM 集成，但我发现的所有插件（摩纳哥的角度包装器）都使用 AMD 集成。同时，由于运行时错误，我无法集成 ESM 捆绑包。我很困惑。我应该使用哪一种方式来使用带有 angular-cli 应用程序（ng v13）的应用程序？两种方法的主要区别是什么？提前谢谢。

Answer 1

我能够按照以下步骤将 ESM 版本与 Angular 15 一起使用：

注意：我使用 nx，但它应该与其他执行器一起使用，例如 Angular builder 注意：我今天实现了这个，并在啤酒之后立即发布了答案，记住可能有我没有涵盖的情况。

1. 安装 monaco-editor-webpack-plugin
2. 更改构建目标以使用支持修改 webpack 配置的执行器。如果是 nx 16，请使用“@nx/angular:webpack-browser”
3. 添加 webpack.config.js

angular.json/project.json

{
  "build": {
    "executor": "@nx/angular:webpack-browser",
    "outputs": ["{options.outputPath}"],
    "options": {
      "customWebpackConfig": {
        "path": "path/to/webpack.config.js"
      },
      ...rest of the options
   }
}

webpack.config.js

const path = require('path');
const MONACO_DIR = path.resolve(process.cwd(), 'node_modules/monaco-editor');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  plugins: [new MonacoWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.ttf$/,
        include: MONACO_DIR,
        use: ['file-loader'],
      },
      {
        test: /\.css$/,
        include: MONACO_DIR,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

现在，您可以创建一个指令来实例化编辑器

@Directive({
  standalone: true,
  selector: '[codeEditor]',
})
export class EditorDirective {
  editor?: editor.IStandaloneCodeEditor;
  hostEl = inject(ElementRef).nativeElement;
  constructor() {
    import('monaco-editor/esm/vs/editor/editor.api').then(({ editor }) => {
      this.editor = editor.create(this.hostEl, {
        value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
        language: 'typescript',
        autoIndent: 'full',
        readOnly: true,
        domReadOnly: true,
      });
    });
  }
}

@Component({
  standalone: true,
  template: `<div codeEditor style="width: 100%; height: 100%"></div>`,
  styles: [`:host{display: block; width: 100%; height: 100%}`]
  imports: [EditorDirective],
})
export class YourComponent {}

Answer 2

完成了 AMD，但仍然对 ESM 感到困惑和困惑。已创建存储库进行解释：https://github.com/alxpsr/ng-monaco-editor-integration

Answer 3

我维护基于 AMD 的 Angular 包装器已经有一段时间了：https://github.com/ngstack/code-editor。您可以查看源代码，如果您觉得有用，也可以使用该组件。

对于ESM，集成到应用程序中仍然是一个复杂的过程。您可以在这里看到很多摩纳哥的示例：https://github.com/microsoft/monaco-editor/tree/main/samples。需要注意的是，您需要修改默认的 Angular 配置，并弄乱 webpack 设置（假设您使用的是 webpack 而不是其他捆绑器）。如果您想这样做，这篇文章可能会有所帮助：https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md.

如果您是库作者，并且选择自定义 Webpack 配置路径，请记住，并非所有用户都希望篡改 Angular CLI 配置来使您的组件运行。即使 Monaco Playground 也是基于 AMD loader 和 React 组件，如果你检查它们的源代码：https://github.com/microsoft/monaco-editor/blob/main/website/src/monaco-loader.ts