I am currently working on implementing the xterm.js library into my Ionic 3 project.
The source code can be found on Github at: https://github.com/aircable/ionic-xterm along with installation instructions. Although I have been able to compile and start the library, I am facing issues with incorrect or missing display of the terminal. The layout is not rendering properly.
In addition, I am encountering difficulties with loading addons as several attempts to do so have been unsuccessful and are currently commented out in the code.
Below is a snippet from home.ts:
import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as Terminal from "xterm";
//import style from 'xterm/dist/xterm.css';
import "xterm/dist/addons/fit/fit";
@Component({
selector: 'terminal',
templateUrl: "home.html",
//styles: [ style ]
//styleUrls: ["./xterm.css"]
})
export class HomePage implements OnInit {
private term: Terminal;
constructor( public navCtrl: NavController ) {
this.term = new Terminal( {cursorBlink: true} );
this.term.open( document.getElementById("terminal") );
//Terminal.loadAddon( "fit" );
//this.term.fit();
this.term.writeln('Welcome to xterm.js');
// this is
this.term.on('key', (key, ev) => {
console.log( key );
});
}
ngOnInit () {}
}