error "ace is not defined" in angular 5 project

Question

I am new to developing angular2+ and ace. When I was embedding ace editor into my angular app, I ran into the error that "ace is not defined".

The system I am using is ubuntu gnome 16.04 The steps I implemented it is: 1.intall ace-builds using npm 2. copy the path from node-module to angular-cli.json(most importantly, the ace.js from src-min-noconflict. 3. build an editor component, the code in the editor.component.ts is like this:

declare const ace:any;

@Component({....})
export class EditorComponent implements OnInit {
    editor:any;
    ......

    ngOnInit() {
        this.editor = ace.edit("editor");
    }
}

the console shows the error was thrown in the line "this.editor =....."

I have been trying some other recent version of ace but did not work. Does anyone have an ideo on how to solve it? I will greatly appreciate the help!

Answer 1

ace is not defined

error can be avoided by importing ace plugin file in your component.

import ace from 'ace-builds/src-min-noconflict/ace';
import "brace/mode/{mode_name}";
import "brace/snippets/{mode_name}";
import "brace/ext/language_tools";