https://github.com/ortegavan/console
Prova de conceito de Monaco Editor & DevExtreme
https://github.com/ortegavan/console
angular
Last synced: about 2 months ago
JSON representation
Prova de conceito de Monaco Editor & DevExtreme
- Host: GitHub
- URL: https://github.com/ortegavan/console
- Owner: ortegavan
- Created: 2025-02-26T21:13:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-05T06:29:52.000Z (about 1 year ago)
- Last Synced: 2025-10-09T02:25:41.195Z (9 months ago)
- Topics: angular
- Language: TypeScript
- Homepage:
- Size: 574 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Console
Prova de conceito para testar integração do Angular 19 com Monaco Editor & DevExtreme
## Monaco Editor
### Instalação
```bash
npm install monaco-editor ngx-monaco-editor-v2
```
### Configuração
1. angular.json
```json
"assets": [
{
"glob": "**/*",
"input": "node_modules/monaco-editor",
"output": "./assets/monaco/"
}
],
```
2. app.config.ts
```typescript
import { provideMonacoEditor } from 'ngx-monaco-editor-v2';
(...)
providers: [
provideMonacoEditor()
]
```
3. main.ts
```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor-v2';
import { importProvidersFrom } from '@angular/core';
export const monacoConfig: NgxMonacoEditorConfig = {
baseUrl: window.location.origin + '/assets/monaco/min/vs',
};
bootstrapApplication(AppComponent, {
providers: [...appConfig.providers, importProvidersFrom(MonacoEditorModule.forRoot(monacoConfig))],
}).catch((err) => console.error(err));
```
## DevExtreme
### Instalação
```bash
npm install devextreme devextreme-angular
```
### Configuração
1. styles.scss
```scss
@use 'devextreme/scss/bundles/dx.fluent.saas.light.scss';
```
2. index.html
```html
(...)
```
## Diagram do DevExtreme
### Instalação
```bash
npm install devexpress-diagram
```
### Configuração
angular.json
```json
"styles": [
"node_modules/devexpress-diagram/dist/dx-diagram.min.css",
"src/styles.scss"
],
```