{"id":18854689,"url":"https://github.com/louis-7/angular-monaco-languageclient","last_synced_at":"2025-04-14T10:41:12.338Z","repository":{"id":36756609,"uuid":"132533877","full_name":"Louis-7/angular-monaco-languageclient","owner":"Louis-7","description":"An Angular based Monaco editor \u0026 language client example","archived":false,"fork":false,"pushed_at":"2023-01-07T13:08:24.000Z","size":5500,"stargazers_count":19,"open_issues_count":26,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-27T23:51:07.872Z","etag":null,"topics":["code-editor","ide","language-client","lsp","monaco","monaco-editor"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Louis-7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-08T00:59:29.000Z","updated_at":"2022-05-26T06:02:31.000Z","dependencies_parsed_at":"2023-01-17T04:33:37.225Z","dependency_job_id":null,"html_url":"https://github.com/Louis-7/angular-monaco-languageclient","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Louis-7%2Fangular-monaco-languageclient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Louis-7%2Fangular-monaco-languageclient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Louis-7%2Fangular-monaco-languageclient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Louis-7%2Fangular-monaco-languageclient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Louis-7","download_url":"https://codeload.github.com/Louis-7/angular-monaco-languageclient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248866692,"owners_count":21174582,"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":["code-editor","ide","language-client","lsp","monaco","monaco-editor"],"created_at":"2024-11-08T03:50:48.586Z","updated_at":"2025-04-14T10:41:12.317Z","avatar_url":"https://github.com/Louis-7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-monaco-languageclient\n\n**Update: Upgrade to Angular 9 now.**\n\n**Star this repo if it helps you**\n\n[![cpgif](https://github.com/Louis-7/angular-monaco-languageclient/blob/master/languageclient.gif?raw=true)](https://github.com/Louis-7/angular-monaco-languageclient)\n\nA Monaco editor (with the ability to connect to a language server) based on Angular framework. This project is an example to show how to use [ngx-monaco-editor](https://github.com/atularen/ngx-monaco-editor) with [monaco-languageclient](https://github.com/TypeFox/monaco-languageclient) together, there are some errors when I use these libraries together, so this project is to show which version of these libraries you should use and how to connect your Monaco editor to language server. If you're trying to build a code editor/IDE based on Angular and connect to a language server, this project could be a good start.\n\nIf you just need to use Monaco Editor with Angular, you should go to [ngx-monaco-editor](https://github.com/atularen/ngx-monaco-editor).\n\n**Old version:**\n\n- Angular 8: ng-v8\n\n\n## Prepare\n\nInstall from the repository:\n\n`git clone https://github.com/Louis-7/angular-monaco-languageclient.git`\n\nInstall dependencies:\n\n`npm install`\n\nDownload example language server from [monaco-languageclient](https://github.com/TypeFox/monaco-languageclient). Please follow instructions from their GitHub page.\n\n## Run\nStart client with `npm start`. And go to `monaco-languageclient\\example` run language server.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\n## Notes\n\n- Only JSON has been tested with the language server. I didn't test other languages, but it should be similar. I will find more language server and put them in this example in the future.\n- I see some developers are suffering from the build error when using Angular and monaco-languageclient together. I solve the problem with an additional webpack configuration file, you will find `extra-webpack.config.js` under the root folder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouis-7%2Fangular-monaco-languageclient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flouis-7%2Fangular-monaco-languageclient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouis-7%2Fangular-monaco-languageclient/lists"}