How to use ACE in Angular

What is ACE?

As the homepage of ACE prompts, Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. You can download and try at https://ace.c9.io/

How to use ACE editor in your Angular app

There are many ways that you can use ACE editor in your Angular app. You can directly download ACE and plug into your project or find a popular built-in angular module

I refer the second one because we shouldn’t reinvent the wheel and the popular built-in one should be used by many developers. So that, bugs must be fixed and the performance must be nice.

ng2-ace-editor is a good one. You can find this package from npm website

https://www.npmjs.com/package/ng2-ace-editor

From root folder of your project where the package.json is in

npm i ng2-ace-editor --save

In your module, import this editor module by add AceEditorModule in to imports section on @NgModule decorator

import { AceEditorModule } from 'ng2-ace-editor';

@NgModule({

    declarations: [

        ...

    ],

    imports: [

         ...

        AceEditorModule,

        ....

       )],

    providers: [],

    bootstrap: []

})

export class AppModule { }

The you can now use ace-editor component in your template file

<ace-editor theme="monokai" mode="javascript" style=" min-height: 150px; overflow: auto;" [formControlName]="'answer'+(num+1)"></ace-editor>

You may see the errors as below one after another. Your editor cannot work correctly

index.js:3802 GET http://localhost:4200/mode-javascript.js net::ERR_ABORTED 404 (Not Found)

After you try to fix the above then you get the followings

blob:http://localhost:4200/5522acb5-d008-4704-b802-99d0412dab23:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/worker-javascript.js' failed to load.
at blob:http://localhost:4200/5522acb5-d008-4704-b802-99d0412dab23:1:1
(anonymous) @ blob:http://localhost:4200/5522acb5-d008-4704-b802-99d0412dab23:1
blob:http://localhost:4200/0741dc5a-f771-4b66-91e1-751e6f50f0b2:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/worker-javascript.js' failed to load.
at blob:http://localhost:4200/0741dc5a-f771-4b66-91e1-751e6f50f0b2:1:1
(anonymous) @ blob:http://localhost:4200/0741dc5a-f771-4b66-91e1-751e6f50f0b2:1
blob:http://localhost:4200/bc6ee16c-f739-4a14-90ca-c0745b80ff61:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/worker-javascript.js' failed to load.
at blob:http://localhost:4200/bc6ee16c-f739-4a14-90ca-c0745b80ff61:1:1

You have to add scripts and assests in angular.json to tell webpack to include those kind of resources to get ACE working with Angular

Add the following into your angular.json then try to ng serve again

"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "worker-javascript.js", "input": "./d /ace-builds/src-min/", "output": "/" },
{ "glob": "worker-css.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" },
{ "glob": "worker-json.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" }
],

"scripts": [
"./node_modules/ace-builds/src-min/ace.js",
"./node_modules/ace-builds/src-min/mode-javascript.js"
]
},

It would be working now! Hope it helps.