摩纳哥编辑器集成有两种常见方式:
由于 angular-cli 在底层使用 webpack 似乎我应该使用 ESM 集成,但我发现的所有插件(摩纳哥的角度包装器)都使用 AMD 集成。同时,由于运行时错误,我无法集成 ESM 捆绑包。我很困惑。我应该使用哪一种方式来使用带有 angular-cli 应用程序(ng v13)的应用程序?两种方法的主要区别是什么?提前谢谢。
我能够按照以下步骤将 ESM 版本与 Angular 15 一起使用:
注意:我使用 nx,但它应该与其他执行器一起使用,例如 Angular builder 注意:我今天实现了这个,并在啤酒之后立即发布了答案,记住可能有我没有涵盖的情况。
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 {}
完成了 AMD,但仍然对 ESM 感到困惑和困惑。已创建存储库进行解释:https://github.com/alxpsr/ng-monaco-editor-integration
我维护基于 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