Migrating ui-codemirror / ui-ace to modern Angular
ui-codemirror and ui-ace bound the CodeMirror and Ace editors to ng-model through directives with an options object. Both wrappers are tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| CodeMirror 6 | Modular and light; create the editor view inside a component of your own. |
| Monaco Editor (ngx-monaco-editor-v2) | When you need the editing experience of VS Code: IntelliSense, diff view, many languages. |
| Ace (ace-builds) | When you used ui-ace and want to keep the same editor, with its modes and themes. |
How to migrate it
- List the languages, themes and options in use, plus any custom modes or autocompletion.
- Wrap the chosen editor in one component that implements ControlValueAccessor.
- Lazy-load that component, so the editor code is downloaded only on the screens that use it.
Watch out. CodeMirror 6 is a rewrite: options, modes and themes from CodeMirror 5 do not carry over, and configuration is done with extensions. Custom modes have to be ported.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn