Hi there,

I follow the guide Use Component guide, but cannot get instance of editor.
When print console log in ngAfterViewInit, always receive undefined.

Could you point me out where am I missing?

Thanks

HTML

<ace-editor #editor [text]="content" 
     [options]="editorOptions" 
     [mode]="'sql'" 
     [autoUpdateContent]="true" 
     [durationBeforeCallback]="1000" 
     (textChanged)="onTextChange($event)">
</ace-editor>

Module

import { AceEditorComponent, AceEditorDirective } from 'ng2-ace-editor';
@NgModule({
    imports: [
        ...
    ],
    declarations: [
        AceEditorComponent,
        AceEditorDirective,
        ...
    ]
})

Component

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { AceEditorComponent } from 'ng2-ace-editor';

export class MyComponent implements AfterViewInit {
    @ViewChild('editor') editor;
    content: string;
    editorOptions: Object;

...

    ngAfterViewInit() {
        console.log(this.editor); // <-- Always return undefined ???
    }
}

Can you make it available for angular universal ?
As there is no "window" object in angular universal you cannot use this directive, except by removing all the modules that use it from the server (which remove the interest of angular universal).

Hi There @fxmontigny,

Great work with this component. I've gotten this all working with Angular 2.0.1 and webpack. Sharing my experiences here so that other users may benefit and so that you may potentially update your documentation?:

Inclusion and Use In Project

• "AceEditorComponent" and "AceEditorDirective" should be included in your app module under declarations. No need to add as a directive within your own component.

Use with Webpack

With respect to webpack, the ace-builds version you've made your project a dependancy will not work. However instead users can use brace which is a current implementation (refactored) of ace-builds specifically made to work with browserify and seems to be well maintained:

• brace on npm
• brace on github

It seems to also work with webpack without issue. Once brace is installed, either within the component where ng2-ace-editor is used or inside their vendor.js file brace can be imported so that it is included in the webpack bundle like so (in my case I am using json mode and the eclipse theme):

// for Ace-Editor that can be used within webpack (brace)
import "brace";
import "brace/mode/json";
import "brace/theme/eclipse";

Is it possible, in the module, to set some lines to be selected (and highlighted) at component load?

Hello!
I am trying to make built-in search box working, but it seems that the package (v.0.2.5) lacks of the extension ext-searchbox.js. When I press Ctrl+F, I get in console "GET https://mysite/ext-searchbox.js 404".
How to get this extension and plug it in?
It is an Angular 2 project with a ASP.NET Core project as a backend. I use the bundler Webpack 2.

UPD
I see this extension in ace-build package. Somehow it is not included in my bundle.

Hello!

My code:
<ace-editor #editor [text]="rule.content" [mode]="'javascript'" (textChanged)="onRuleChange($event)"
[autoUpdateContent]="true" [theme]="'eclipse'" style="min-height: 500px; width:100%; overflow: auto;">

this.editor.getEditor().setOptions({
enableBasicAutocompletion: true,
maxLines: 1000
});

@ViewChild('editor') editor;

onRuleChange($event){
this.rule.content = $event;
}

But then i change "rule" object from rule1 to rule2, for example, in editor i see only "rule1", then i click to editor - content of "rule2" shown.

Is there a possibility to mark a line as error, warning or info? and set a tooltip to show a message?

Thanks.

Regards.

I use ng2-ace-editor in an angular-cli project. Now I updated to the latest version of ng2-ace-editor 0.2.0.
When I run ng serve it tells me:
ERROR in AceEditorModule is not an NgModule

You can reproduce it with the latest angular-cli version 1.0.2:
ng new editor-test
cd editor-test
npm install ng2-ace-editor --save

Add AceEditorModule into the imports of the AppModule
Run:
ng serve or ng build

Hi there,
Is there any way to disable the syntax validation, or to remove the errors marks on the left margin ?
Thanks

How to save code from editor to database? Or get it to variable

It seems that syntax validation isn't working. Issue is checked on embedded demo.

I've been trying to change useWorker option but with no success. Also I've tried setting it programatically, like:

editor.session.setOption("useWorker", true);

But content doesn't get validated.

I've noticed that content starts to get validated when I remove script:

"../node_modules/ace-builds/src-min/ace.js",

from angular-cli.json file. Any ideas?

I am seeing an issue with pasting a sql statement into the ace editor. The textChanged event doesnt fire, for example like so:

<ace-editor [text]="initialSql"
(textChanged)="editedQuery.Query=$event"
[mode]="'sql'">

It works fine if i manually type the text or after pasting hit the space key. Same happens if you have the (textChanged) event call a function that prints to console. Anyone else seen this issue?

Ace editor struggles to detect initial change. So if I have an editor with some code in it, and I remove one letter. It doesn't detect the changes up until I make more changes. This is a very annoying bug.

I'm having trouble with populating ng2-ace-editor text from an Observable (from and delay supposed to mimic a future service).

page.component.html:

<ace-editor #editor
    style="height:350px;"
    [text]="code"
    [mode]="'html'"
    [theme]="'clouds'"
    [readOnly]="false"
    [autoUpdateContent]="true"
></ace-editor>

page.component.ts:

export class PageComponent implements AfterViewInit, OnInit {
    code: string = '';
    editorOptions: any = {
        showPrintMargin: false,
        showInvisibles: true,
        highlightGutterLine: true,
    };

    @ViewChild('editor') editor;

    ngOnInit() {
        this._dummyGetUserHtml().subscribe(data => {
            console.log(data);
            this.code = data; // why won't this work?
            this.editor.getEditor().setValue(data); // and we need this?
        });
    }

    ngAfterViewInit() {
        this.editor.getEditor().setOptions(this.editorOptions);
    }

    private _dummyGetUserHtml(){
        return Observable.from([
            `<body><p>Hello world!</p></body>`
        ]).delay(1000);
    }
}

What am I doing wrong? (The thing does not work also when I move the subscription to ngAfterViewInit)

I mean: I know instead of: this.text = data I could do this.editor.getEditor().setValue(data), but I expect that assigning to the component's @Input() text should work without using the api methods. Any suggestions please?

Hello. I tried to integrate your ace-editor in one of my projects, but I seem do to something wrong. Do you have a small example project, which is running, which I could use to check my settings? I tried both the minimal option as well as the other one where I created a new component involving the ace-editor. Either would be fine for me if I got it running... Thank you.

I had this issue microsoft/TypeScript#15363 with ng2-ace-editor and seems like the solution is the following. Copied from Goyoo/node-k8s-client#35

Right now, users who are trying to consume this library with TypeScript using settings like noImplicitAny are having a negative user experience because the packaged .ts files are getting fully re-checked. See microsoft/TypeScript#15363 for an example of a problem caused by this.

Running TypeScript with --declaration to produce .d.ts files and adding your regular .ts files to an .npmignore file will prevent this issue.

Hi, you should change your project to the NgModule pattern... not having a Module is not nice.

Tried this.editor.setMode(javascript),it worked but not working for c_cpp,java and other languages.

Is it possible to integrate brace-diff into ace editor ?

I couldn't get the ng test to work. Should it?

Please start again tagging your releases. The latest here is 0.0.12
Thank you :)

how to enable autocomplete in ace editor. please help me. i tried with option but not working.
like
Thanks in advance

Hello !
Petite question : pourquoi ne pas avoir utilisé la directive [ngModel] afin d'avoir un binding dans les 2 sens sur la variable contenant le texte json, plutôt que le couple text + textChanged ?

When I try to run the build with ng build --prod --aot I got errors. I have similar situation with other Angular2 package, fortunately I found AOT ready fork of it. Could you point me where I can find AOT ready version of the ng2-ace-editor?

https://ace.c9.io/api/document.html#Document.applyDeltas

I'm trying to create a real-time editor between multiple users, but I'm not quite sure if this function exists.

When trying to use ng2-ace-editor v0.3.2 within an angular 4 project, I get the following error:

@ multi ./src/main.ts ERROR in Error: Metadata version mismatch for module D:/denis/devel/swadit/node_modules/ng2-ace-editor/src/directive.d.ts, found version 4, expected 3 at StaticSymbolResolver.getModuleMetadata (D:\denis\devel\swadit\node_modules\@angular\compiler\bundles\compiler.umd.js:25616:34) at StaticSymbolResolver._createSymbolsOf (D:\denis\devel\swadit\node_modules\@angular\compiler\bundles\compiler.umd.js:25404:46) at StaticSymbolResolver.getSymbolsOf (D:\denis\devel\swadit\node_modules\@angular\compiler\bundles\compiler.umd.js:25385:14) at D:\denis\devel\swadit\node_modules\@angular\compiler\bundles\compiler.umd.js:24241:30 at Array.forEach (native) at extractProgramSymbols (D:\denis\devel\swadit\node_modules\@angular\compiler\bundles\compiler.umd.js:24240:79) at AotCompiler.analyzeModulesAsync (D:\denis\devel\swadit\node_modules\@angular\compiler\bundles\compiler.umd.js:23796:47) at CodeGenerator.codegen (D:\denis\devel\swadit\node_modules\@angular\compiler-cli\src\codegen.js:32:14) at Function.NgTools_InternalApi_NG_2.codeGen (D:\denis\devel\swadit\node_modules\@angular\compiler-cli\src\ngtools_api.js:73:30) at _donePromise.Promise.resolve.then (D:\denis\devel\swadit\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\plugin.js:430:58)

v0.3.1 still does work with angular 4.

My versions:

• @ angular/[email protected]
• [email protected]
• @ angular/[email protected]

Please how can I mute the multiple warning messages in the console. I assume the setMode
ivocation is the direct cause of it. How should I rephrase my code so that is goes silent? Below please find my code.

console.(anonymous function)	@	console.js:26
o	@	VM41567:1
$startWorker	@	VM41567:1
$onChangeMode	@	VM41567:1
setMode	@	VM41567:1
AceEditorComponent.setMode	@	component.ts:82
AceEditorComponent.init	@	component.ts:35
AceEditorComponent	@	component.ts:28
Wrapper_AceEditorComponent	@	wrapper.ngfactory.js:7
View_ContentPageComponent0.createInternal	@	component.ngfactory.js:210
AppView.create	@	view.js:74
DebugAppView.create	@	view.js:327
View_ContentPageComponent_Host0.createInternal	@	host.ngfactory.js:16
AppView.createHostView	@	view.js:81
DebugAppView.createHostView	@	view.js:338
ComponentFactory.create	@	component_factory.js:154
ViewContainerRef_.createComponent	@	view_container_ref.js:113
RouterOutlet.activate	@	router_outlet.js:98
ActivateRoutes.placeComponentIntoOutlet	@	router.js:899
ActivateRoutes.activateRoutes	@	router.js:873
(anonymous function)	@	router.js:828
ActivateRoutes.activateChildRoutes	@	router.js:828
ActivateRoutes.activateRoutes	@	router.js:860
(anonymous function)	@	router.js:828
ActivateRoutes.activateChildRoutes	@	router.js:828
...

for brevity: snipped repetitive calls from Observable and zone

html

<ace-editor #editor
                  class="code-editor"
                  mode="html"
                  theme="clouds"
                  [text]="(buildHtml$ | async)"
                  [readOnly]="!(editorInitialized$ | async)"
                  [autoUpdateContent]="false"
                  (textChanged)="onCodeChange($event)"
      ></ace-editor>

ts

private editorOptions: any = {
    showPrintMargin: false,
    showInvisibles: true,
    highlightGutterLine: false,
    highlightActiveLine: false,
    fadeFoldWidgets: true,
    showLineNumbers: true,
    showGutter: true,
    fontSize: 16,
    wrap: false,
  };

const editor = this.editor.getEditor();
editor.$blockScrolling = Infinity; // needed to suppress component's debug message
editor.setOptions(this.editorOptions);

my code is:

<ace-editor [(text)]="endpoint.Request" [theme]="'eclipse'" [readOnly]="true" #editor style="min-height:300px;">

I am trying to change the theme, used by ng2-ace-editor, to 'clouds' using this.editor.setTheme('clouds'). I tried various path variants like 'brace/theme/cloudsetc - to no avail. What is the way of setting thebasePath` (which I think I need) in Angular2 (TypeScript)?

Looked at AceEditorComponent.prototype.setTheme in ng2-ace-editor.js and saw the name of the theme is concatenated to ace/theme/- it does not work for me though. DevTools spit out a 404 because of http://localhost:4200/theme-clouds.js Wondering what the problem could be.

ERROR TypeError: Cannot read property 'emit' of undefined - Line 64 directive.ts
I was using your editor in my angular app, my angular cli is of version 4. Maybe it's a version issue, but I did want to point out.

Is there a possibility to adjust the height to the content of the editor?

For example:

I have text which has only one line, so the editor adjust its height to this one line.
I have text which has n lines (like some code), so editor adjust its height to n lines.

Is that possible?

Thanks

In the current version, mode can only be a string.
I'm using a fork of Ace which supports json schema validation (based on the Microsoft VS code implementation). This validation needs a mode option : the schema containing the validation rules.

Therefore, the mode property should be an object instead of a string. This object can have 2 properties in my specific implementation : path (ace/mode/json) and schemaText : the validation inline schema.

Hi,

There is an issue with ng2-ace-editor and protractor e2e tests. Tests does not work for pages in which ng2-ace-editor is used. As soon as test navigates to a page in which ng2-ace-editor is used, it just freezes. Seems like ng2 ace editor is not allowing browser to finish synchronizing, and that is the cause why protractor still thinks that page is loading.

Is this a known issue already?

Best regards,
Valters

converting a working angular 4 project over to angular 5, I get this error when compiling

ERROR in ./node_modules/ng2-ace-editor/src/module.ts
Module build failed: Error: /myapp/node_modules/ng2-ace-editor/src/module.ts is not part of the compilation output. 

Hi.
I need to highlight several lines by line number. How can i achieve this with ng2-ace-editor?

There is method highlightLines() at https://ace.c9.io/#nav=api&api=edit_session.
Can we use it?

I am new to ace editor so any help/example appreciated.

Hi there,

First, thanks for the library, works pretty good.
But I am getting this annoying warning.
Wonder how I am able to shut it off as I cannot seem to find a way to access the editor variable

Thanks

Building the source with angular cli for production fails.
The "ng build --prod" command throws an error:

ERROR in Cannot determine the module for class AceEditorComponent in /node_modules/ng2-ace-editor/src/component.ts!

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

It seems the solution would be to put the editor into a module that contains the component and directive.

After upgrading my angular project to the following:

@angular/cli: 1.1.0
node: 8.0.0
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

i'm no longer able to import theme/mode by adding their location to script "var" as following:
"scripts": ["../node_modules/ace-builds/src-min/mode-sql.js", "../node_modules/ace-builds/src-min/theme-twilight.js"],

when loading the project and surfing it through the browser i get this error:

uncaught ReferenceError: define is not defined
    at eval (eval at P+fo.e.exports (scripts.890555a….bundle.js:1), <anonymous>:1:1)
    at eval (<anonymous>)
    at P+fo.e.exports (scripts.890555a….bundle.js:1)
    at Object.QriN (scripts.890555a….bundle.js:1)
    at r (inline.7968b0a….bundle.js:1)
    at Object.2 (scripts.890555a….bundle.js:1)
    at r (inline.7968b0a….bundle.js:1)
    at window.webpackJsonp (inline.7968b0a….bundle.js:1)
    at scripts.890555a….bundle.js:1

The issue is similar to what is described on #44

$> git clone https://github.com/fxmontigny/ng2-ace-editor.git
$> cd ng2-ace-editor/examples/basic
$> npm install
# see npm output in attached file
$> ng serve
** NG Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201 **
 19% building modules 76/93 modules 17 active ...de_modules\core-js\modules\_global.jswebpack: wait until bundle finished: /
 94% asset optimizationwebpack: wait until bundle finished: /
Hash: 5ca03873096b544a3f0f
Time: 20874ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {5} [initial] [rendered]
chunk    {1} scripts.bundle.js, scripts.bundle.js.map (scripts) 367 kB {5} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 6.06 kB {4} [initial] [rendered]
chunk    {3} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {5} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.86 MB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

But unfortunately, when opening http://localhost:4201 using chrome:

Could not load worker TypeError: e.split is not a function
    at a.t.moduleUrl (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1:54763)
    at new u (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1:312651)
    at Mode.createWorker (html.js:2405)
    at p.$startWorker (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1:167093)
    at p.$onChangeMode (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1:166328)
    at p.eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1:166089)
    at a.t.loadModule (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1:55287)
    at p.setMode (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1:165904)
    at AceEditorComponent.webpackJsonp.../../../../ng2-ace-editor/src/component.ts.AceEditorComponent.setMode (component.ts:115)
    at AceEditorComponent.webpackJsonp.../../../../ng2-ace-editor/src/component.ts.AceEditorComponent.init (component.ts:45)

Full console log is attached to this issue.

Using brace as suggested by #44 might be a valuable workaround but doesn't appear to me as the best solution.
localhost-1498751624344.txt
npm_install.txt

Hi, the ng2-ace-editor can support angular 2.4? thanks~

I'm facing following issue while checking for linting errors ng lint.

node_modules\ng2-ace-editor\tslint.json: Could not find custom rule directory: node_modules/codelyzer
Error
at new FatalError (C:\Pimco_template\expression-web\node_modules\tslint\lib\error.js:31:23)
at Object.findConfiguration (C:\Pimco_template\expression-web\node_modules\tslint\lib\configuration.js:55:15)
at files.forEach (C:\Pimco_template\expression-web\node_modules@angular\cli\tasks\lint.js:61:48)
at Array.forEach (native)
at lintConfigs.map (C:\Pimco_template\expression-web\node_modules@angular\cli\tasks\lint.js:53:19)
at Array.map (native)
at Class.run (C:\Pimco_template\expression-web\node_modules@angular\cli\tasks\lint.js:34:14)
at Class.run (C:\Pimco_template\expression-web\node_modules@angular\cli\commands\lint.js:46:25)
at resolve (C:\Pimco_template\expression-web\node_modules@angular\cli\ember-cli\lib\models\command.js:273:20)
at Class.validateAndRun (C:\Pimco_template\expression-web\node_modules@angular\cli\ember-cli\lib\models\command.js:251:12)

Please help me to link an Ace editor (in an Angular 2 app) to a custom theme. I need to place it within my app's assets folder src/app/assets rather than buried in node_modules.

How should the angular-cli.json look in this fragment:

"scripts": [
    "../node_modules/ace-builds/src-min/ace.js",
    "./assets/my-theme.js"
],

and how the require should look like:

var r=e("../lib/dom"); r.importCssString(t.cssText,t.cssClass)})

I think I am missing some crucial piece of info on base paths.

When I configure the ace-editor component to include an ngModel i.e. [(text)]="text" The behaviour of the editor is not correct. For example

If I type public static void main() {
//and I then type in this code block, only the first character is on this line and then the line below this is highlighted and the rest of the line is type next to the closing bracket below.
}//this line is highlighted, see attached screen shot.

If I remove the ngModel [(text)]="text" the behaviour is as expected. See attached screenshot.

here is the html:
<ace-editor class="ace-editor"
[(text)]="text"
[mode]="'java'"
#editor style="height:150px;">

here is the component:
import {Component, ViewChild} from '@angular/core';

import 'brace/theme/eclipse';
import 'brace/mode/html';

@component({
selector: 'tn-editor-ace',
templateUrl: './editor-ace.component.html',
styleUrls: ['./editor-ace.component.scss']
})
export class EditorAceComponent {

@ViewChild('editor') editor;
text: string = "";

ngAfterViewInit() {
this.editor.setTheme("eclipse");

this.editor.getEditor().setOptions({
  showPrintMargin: true,
  showInvisibles: false,
  highlightGutterLine: false,
  highlightActiveLine: true,
  showLineNumbers: true,
  showGutter: true,
});

}
}

I'm using ionicv2. After npm install, I keep getting this after build. I've checked all file names, seems to be accurate.

I've used aceEditorOptions = {firstLineNumber: 0}

and after that I have set a range like this:
let rng = ace.acequire('ace/range').Range;
this.highlight.getEditor().session.addMarker(
// startRow, startColumn, endRow, endColumn
new rng(0, 0, 0, 0), 'error-style', 'line');

This is supposed to highlight the 0 line (this works for example with rng(3, 0, 0, 0) ). However it doesn't.

As a side note - also the 0 line is not shown in the gutter - probably related to issue ajaxorg/ace#3265

Hi there,

Thanks very much for your work; I've just started using ng2-ace-editor and I love it!

I had some questions and wondered if this was the correct place to ask; if not could you please direct me to the correct location?

1. As far as I can tell, it's not possible to access the editor using ng2-ace-editor. Is there a reason for this? It's quite likely I am mistaken. In my project, we need to access the editor object, so we can extend it. Are you open to exposing the editor object so we can extend it? Here is an example
2. Are you open to contributions? If I was to fork your repo and expose the editor object, would you mind reviewing my PR and consider merging the changes into ng2-ace-editor? If so, do you have any contribution guidelines you'd like contributors to follow?

`ERROR in /Users/kakalot/phpCode/node_modules/ng2-ace-editor/src/directive.d.ts (1,50): Cannot find module '@angular/core'.

ERROR in /Users/kakalot/phpCode/node_modules/ng2-ace-editor/src/component.d.ts (1,50): Cannot find module '@angular/core'.

ERROR in /Users/kakalot/phpCode/node_modules/ng2-ace-editor/src/component.d.ts (2,38): Cannot find module '@angular/forms'.

ERROR in Error encountered resolving symbol values statically. Could not resolve @angular/core relative to /Users/kakalot/phpCode/node_modules/ng2-ace-editor/src/module.d.ts., resolving symbol AceEditorModule in /Users/kakalot/phpCode/node_modules/ng2-ace-editor/src/module.d.ts, resolving symbol AceEditorModule in /Users/kakalot/phpCode/node_modules/ng2-ace-editor/src/module.d.ts`

I run it on angular cli newset, material newest, mac 10.12.6 64bit, any people help me? please

Hihi~
I import AceEditorModule into my app.module.ts as below:
import { AceEditorModule } from "ng2-ace-editor";
And import related scripts into angular-cli.json as

using it in my html as

but get error when input invalid code like:

And could not get the error warning in ace-editor page like:

upload package.json for version checking
package.txt

Thanks in advance for any kindly suggestions~

Hi,
I have a problem to import the component. I have imported library using SystemJS.

module.ts

import { AceEditorModule } from "ng2-ace-editor"
@NgModule({
    imports: [
         ...,
        AceEditorModule
    ],
    ...

component.ts

import { AceEditorComponent } from "ng2-ace-editor"

@Component({
    templateUrl: "./workspace.component.html"
})
export class ProjectWorkspaceComponent {
    @ViewChild("editor") editor: AceEditorComponent
    text: string = ""
}

component.html

<ace-editor #editor [(text)]="text" style="height:150px"></ace-editor>

I have the following error:

'ace-editor' is not a known element:
1. If 'ace-editor' is an Angular component, then verify that it is part of this module.
2. If 'ace-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("class="col-md-12">
            <!--<div id="ace-editor" style="height:150px;"></div>-->
            [ERROR ->]<ace-editor #editor [(text)]="text" style="height:150px"></ace-editor>
        </div>

So how can I solve?

Thank you

currently, editor's selection is select all text by default, I think it is a litter weird.

I use
this.editor.getEditor().selection.moveCursorFileStart();
on AfterViewInit to cancel selection.

can you add a option to do it?