Loading theme not working in basic example

[eckertCrypto]

Hello,

in the basic example i tried to change the theme like in the readme described but on console i get an error on "GET http://localhost:4200/theme-eclipse.js"

what i did:

• $ git clone https://github.com/fxmontigny/ng2-ace-editor.git
• $ cd ng2-ace-editor/examples/basic
• $ npm install
• modified the 'scripts' variable in .angular-cli.json to: "scripts": [ "../node_modules/ace-builds/src-min/ace.js", "../node_modules/ace-builds/src-min/theme-eclipse.js" ]
• added this.firstEditor.getEditor().setTheme("eclipse"); in app.component.ts as last line in ngAfterViewInit
• $ ng serve --open

Did i miss something? Or is there a problem with the example?

[ScottSpittle]

@ViewChild('editor') editor;

this.editor.setTheme("eclipse");

This snippet it how I achieve this, it seems to work fine for me, hope that helps.

[shees-usman]

Im using ace editor as a component and simply binding it [theme]="theme" worked for me. In my editor.component I have: `@Component({ selector: 'my-editor', template:'<ace-editor [(text)]="code" [mode]="languageMode" [readOnly]="readOnly" [theme]="theme" [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onChange()" [options]="options" style="height: 100%; width:100%;overflow: hidden;" #editor> ' }) export class EditorComponent implements OnInit {

//Editor settings to be able to set from parent @Input() theme: string; @Input() indentGuides: boolean; @Input() enableInvisibles: boolean; @Input() languageMode: string; @Input() code: string; @Input() readOnly: boolean = false; @Output() codeChange: EventEmitter = new EventEmitter(); //Change suffix is necessary to allow angular2 to recognise //as 2 way binding options:any; fontsize = 12; expand = false; constructor(public EmitterUtil: EmitterUtil) { } minlines = 20; maxlines = 20; @ViewChild('editor') editor; ngOnInit() { if(this.languageMode==='') this.languageMode = 'javascript'; this.options = { minLines: this.minlines, maxLines: this.maxlines, fontSize: this.fontsize, enableBasicAutocompletion: true, enableLiveAutocompletion: true, displayIndentGuides: this.indentGuides, showInvisibles: this.enableInvisibles, scrollPastEnd: true, showPrintMargin: false, }; } onChange() { this.codeChange.emit(this.code); }

}I also have this code in my component in another project and this updated the editor lines fine: this.expand = data; if (this.expand) { this.editor.getEditor().setOptions({ minLines: 36, maxLines: 36 }); }else { this.editor.getEditor().setOptions({ minLines: 20, maxLines: 20 }); }Similarly I also use this to refocus on my editor after an event has been emitted in the subscribe block of the emitter:if (data === true) { this.editor.getEditor().focus(); // To focus the ace editor const session = this.editor.getEditor().getSession(); // Get the number of lines const count = session.getLength(); // Go to the last line this.editor.getEditor().gotoLine(count, session.getLine(count - 1).length); } `

I use this component in another component as: <div class="card-block p-0"> <my-editor [readOnly]="codingLanguage===''" [languageMode]="codingLanguage" [(code)]="code" [indentGuides]="indents" [enableInvisibles]="invisibles" [theme]="editorTheme" ></my-editor> </div>

In my angular-cli.json I have:

"scripts": [ "../node_modules/ace-builds/src-min/ace.js", "../node_modules/ace-builds/src-min/ext-language_tools.js", "../node_modules/ace-builds/src-min/theme-eclipse.js", "../node_modules/ace-builds/src-min/theme-chaos.js", "../node_modules/ace-builds/src-min/theme-chrome.js", "../node_modules/ace-builds/src-min/theme-clouds.js", "../node_modules/ace-builds/src-min/mode-javascript.js" ] And all the themes are loading alright. Hope this can save you the days I spent figuring out how to properly use the editor.

[ChoeYoonSeop]

same with me.

• angular 5.1.1
• angular-cli 1.6.1

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserModule, 
    AppRoutingModule,
    AceEditorModule,
...

<div ace-editor
     [(text)]="payload"
     [mode]="'sql'"
     [theme]="'eclipse'"
     [options]="aceEditorOptions"
     [readOnly]="false"
     [autoUpdateContent]="true"
     [durationBeforeCallback]="1000">
</div>

"scripts": [
  "../node_modules/ace-builds/src-min/ace.js",
  "../node_modules/ace-builds/src-min/theme-eclipse.js",
  "../node_modules/ace-builds/src-min/mode-sql.js"
],

and

@ViewChild('editor') editor;
this.editor.setTheme("eclipse");

not works

[RajeshR3-Hexaware]

I am facing the same issue like @ChoeYoonSeop facing. Theme files are trying to load from

index.js:3335 GET http://localhost:4200/theme-eclipse.js net::ERR_ABORTED index.js:3335 GET http://localhost:4200/mode-sql.js net::ERR_ABORTED

[shakesBeardZ]

Hola, the module uses brace themes and it loads theme component,js. I solved this issue by changing the component,js in node_modules/ng2-ace-editor/src and importing the right theme and mode

[codewiseio]

Also experiencing this issue. @shakesBeardZ solution worked for me.

[schwerlaut]

Changing the imported theme somewhere in your node-modules-folder seems like a weird idea. You can just add the imports to your component including the editor

//manually import theme and mode for ace - else it will try to autoload it (and fail on doing so)...
import "brace/theme/chrome";
import "brace/mode/yaml";

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',//<-includes the editor
  styleUrls: ['./my-component.scss']
})

[kondaurovDev]

https://github.com/fxmontigny/ng2-ace-editor/issues/44