- Angular 7+
- monaco-editor: 1.5+
See: https://alauda.github.io/ng-monaco-editor/demo/
yarn add monaco-editor ng-monaco-editor
Currently this library only supports load monaco-editor with AMD mode. You have to make sure your Angular application could have access to the monaco-editor library assets via RequireJS.
If you are using Angular CLI to bootstrap your app, you could add the following:
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/monaco-editor/min/vs",
"output": "/lib/vs"
},
],
Most of the time, you should configure the module at the root module.
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FormsModule,
MonacoEditorModule.forRoot({
// Angular CLI currently does not handle assets with hashes. We manage it by manually adding
// version numbers to force library updates:
baseUrl: 'lib',
defaultOptions: DEFAULT_MONACO_OPTIONS,
}),
],
providers: [
{
// Optional:
// You could also override the default MonacoEditor provider.
// If you plan to do so, I recommend you to read through the source code.
provide: MonacoProviderService,
useClass: CustomMonacoProviderService,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
Please refer to the storybook (stores/index.ts
).
This module provide three usages:
ng-monaco-editor
componentng-monaco-diff-editor
componentngCodeColorize
directive
Note, if the height of ng-monaco-editor/ng-monaco-diff-editor is too small, you may have to resize it yourself. This is a limitation and by design that how monaco-editor works.
MIT @Alauda