Integrar xterm.js a Angular

Solución:

Debes configurar la encapsulación del componente

@Component({
  encapsulation: ViewEncapsulation.None,
  ...
})

Encontré el mismo problema y encontré esta página. Quizás sea demasiado tarde para el OP, pero podría ser útil para otros.

Los estilos son incorrectos porque 1) el xterm.css no está cargado, y 2) la encapsulación.

Mi solución a 1) fue agregar @import 'xterm/dist/xterm.css'; en el archivo scss de este componente.

Y 2) se puede resolver configurando encapsulation: ViewEncapsulation.None como respuesta de Victor96, o mejor escenario encapsulation: ViewEncapsulation.ShadowDom.

Espero que esto ayude.

Intente usar en la variable de referencia de la plantilla usando el símbolo de almohadilla

<div #myTerminal></div>

y en componente

@ViewChild('myTerminal') terminalDiv: ElementRef;

En ngOnInit

ngOnInit() {
    this.term = new Terminal();
    this.term.open(this.terminalDiv.nativeElement);
    this.term.writeln('Welcome to xterm.js');
  }

---

---

Utiliza Nuestro Buscador