{"id":18542321,"url":"https://github.com/alauda/ng-monaco-editor","last_synced_at":"2025-04-09T15:04:21.229Z","repository":{"id":33006146,"uuid":"149416074","full_name":"alauda/ng-monaco-editor","owner":"alauda","description":"Angular wrapper for monaco-editor.","archived":false,"fork":false,"pushed_at":"2024-10-09T07:07:15.000Z","size":23743,"stargazers_count":29,"open_issues_count":5,"forks_count":5,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-09T15:03:16.528Z","etag":null,"topics":["angular","monaco-editor","ng"],"latest_commit_sha":null,"homepage":"https://ng-monaco-editor.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alauda.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-19T08:15:35.000Z","updated_at":"2024-05-17T16:47:58.000Z","dependencies_parsed_at":"2024-03-14T03:32:06.324Z","dependency_job_id":"61728281-a8c3-432c-9951-a3636b6514a6","html_url":"https://github.com/alauda/ng-monaco-editor","commit_stats":{"total_commits":90,"total_committers":12,"mean_commits":7.5,"dds":0.6777777777777778,"last_synced_commit":"f148e20484fddb9e97db1aef36922cb7ff5b20d8"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alauda%2Fng-monaco-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alauda%2Fng-monaco-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alauda%2Fng-monaco-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alauda%2Fng-monaco-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alauda","download_url":"https://codeload.github.com/alauda/ng-monaco-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055276,"owners_count":21040156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","monaco-editor","ng"],"created_at":"2024-11-06T20:08:03.748Z","updated_at":"2025-04-09T15:04:21.200Z","avatar_url":"https://github.com/alauda.png","language":"TypeScript","readme":"# Angular wrapper for monaco-editor\n\n[![GitHub Release Workflow Status](https://github.com/alauda/ng-monaco-editor/workflows/Release/badge.svg)](https://github.com/alauda/ng-monaco-editor/actions/workflows/release.yml)\n[![GitHub Stories Workflow Status](https://github.com/alauda/ng-monaco-editor/workflows/Deploy%20stories/badge.svg)](https://github.com/alauda/ng-monaco-editor/actions/workflows/stories.yml)\n[![npm](https://img.shields.io/npm/v/ng-monaco-editor)](https://www.npmjs.com/package/ng-monaco-editor)\n\n## Dependencies\n\n- [`Angular`](https://github.com/angular/angular) 10+\n- [`monaco-editor`](https://github.com/Microsoft/monaco-editor): 0.15+\n\n## Demo\n\nSee: \u003chttps://ng-monaco-editor.js.org\u003e or \u003chttps://ng-monaco-editor.netlify.app\u003e\n\n## Setup\n\n### Add npm dependencies\n\n```sh\n# npm\nnpm i monaco-editor ng-monaco-editor\n\n# yarn\nyarn add monaco-editor ng-monaco-editor\n```\n\n### Configure monaco-editor library assets\n\nIt's supported to load monaco-editor with AMD or ESM mode.\n\nIf you'd like to use AMD mode, you have to make sure your Angular application could have access to the `monaco-editor` library\nassets via AMD. If you are using Angular CLI to bootstrap your app, you could add the following:\n\n```jsonc\n{\n  \"assets\": [\n    \"src/favicon.ico\",\n    \"src/assets\",\n\n    {\n      \"glob\": \"**/*\",\n      \"input\": \"node_modules/monaco-editor/min/vs\",\n      \"output\": \"/lib/vs\"\n    }\n  ]\n}\n```\n\n### Load ng-monaco-editor module\n\nMost of the time, you should configure the module at the root module.\n\n```ts\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot({\n      /**\n       * optional, load monaco by yourself, you'd prefer loading esm for example\n       */\n      dynamicImport: () =\u003e import('monaco-editor'),\n\n      /**\n       * optional, use amd loader to load monaco if present, lower priority than `dynamicImport`\n       *\n       * Angular CLI currently does not handle assets with hashes. We manage it by manually adding\n       * version numbers to force library updates:\n       */\n      baseUrl: 'lib/v1',\n\n      defaultOptions: {},\n    }),\n  ],\n  providers: [\n    {\n      // Optional:\n      // You could also override the default MonacoEditor provider.\n      // If you plan to do so, I recommend you to read through the source code.\n      provide: MonacoProviderService,\n      useClass: CustomMonacoProviderService,\n    },\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n### Usage example\n\nPlease refer to the storybook (`stories/**/*.stories.ts`).\n\nThis module provide three usages:\n\n1. `ng-monaco-editor` component\n2. `ng-monaco-diff-editor` component\n3. `ngCodeColorize` directive\n\nNote, if the height of ng-monaco-editor/ng-monaco-diff-editor is too small, you\nmay have to resize it yourself. This is a limitation and by design\nthat how monaco-editor works.\n\n## License\n\n[MIT](./LICENSE) @[Alauda](https://github.com/alauda)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falauda%2Fng-monaco-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falauda%2Fng-monaco-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falauda%2Fng-monaco-editor/lists"}