https://github.com/louis-7/angular-monaco-languageclient
An Angular based Monaco editor & language client example
https://github.com/louis-7/angular-monaco-languageclient
code-editor ide language-client lsp monaco monaco-editor
Last synced: about 1 year ago
JSON representation
An Angular based Monaco editor & language client example
- Host: GitHub
- URL: https://github.com/louis-7/angular-monaco-languageclient
- Owner: Louis-7
- Created: 2018-05-08T00:59:29.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T13:08:24.000Z (over 3 years ago)
- Last Synced: 2025-03-27T23:51:07.872Z (about 1 year ago)
- Topics: code-editor, ide, language-client, lsp, monaco, monaco-editor
- Language: TypeScript
- Homepage:
- Size: 5.25 MB
- Stars: 19
- Watchers: 4
- Forks: 2
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-monaco-languageclient
**Update: Upgrade to Angular 9 now.**
**Star this repo if it helps you**
[](https://github.com/Louis-7/angular-monaco-languageclient)
A 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.
If you just need to use Monaco Editor with Angular, you should go to [ngx-monaco-editor](https://github.com/atularen/ngx-monaco-editor).
**Old version:**
- Angular 8: ng-v8
## Prepare
Install from the repository:
`git clone https://github.com/Louis-7/angular-monaco-languageclient.git`
Install dependencies:
`npm install`
Download example language server from [monaco-languageclient](https://github.com/TypeFox/monaco-languageclient). Please follow instructions from their GitHub page.
## Run
Start client with `npm start`. And go to `monaco-languageclient\example` run language server.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Notes
- 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.
- 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.