Loading Addons in Angular 2 / Typescript

[DerekTBrown]

I am not sure how to import the addons packages when using Angular 2 / Typescript. The solution I came up with is rather inelegant:

// Import Angular
	import { Component } from '@angular/core';

// Import Xterm
        import * as Terminal from 'xterm/dist/xterm';
	import style from 'xterm/dist/xterm.css';
	import 'xterm/dist/addons/fit/fit.js';

// Export Data Interface
  @Component({
    selector: 'terminal',
    template: '<div id="terminal" #terminal></div>',
    styles: [ style ]
  })

  export default class TerminalView {
		@ViewChild('terminal') container : ElementRef;
		private xterm : Terminal;

		ngOnInit(){
			this.xterm = new Terminal();
			this.xterm.open(this.container.nativeElement);
			this.xterm.fit();
		}

  }

[parisk]

@DerekTBrown feel free to continue the discussion here or posting a question in the xtermjs StackOverflow tag.

I will be closing this issue since it does not have to do with xterm.js itself, but with how you can use it in a particular context.

I am not sure what inelegant means in your case as I have no experience with Angular, but you can try using the loadAddon method which is the suggested way of consuming xterm.js.

[parisk]

@DerekTBrown also, if you find a more elegant way to consume xterm.js with Angular, please let us know and we will add it in our documentation website 😄.

[GavinSong123]

@DerekTBrown I want to use xterm in angular2. But the private term: Terminal; has error that Cannot find name 'Terminal'..

[DerekTBrown]

@GavinSong123 did you install the typings? If not, npm install --save-dev @types/xterm

[DerekTBrown]

@parisk I think the easy solution would be to export the typings from this project directly into the @types/xterm package (which is in DefinitelyTyped).

[Tyriar]

@DerekTBrown #335 is inching closer and closer to done. Once that's complete typings will be shipped with the module so it should all just work.

[GavinSong123]

@DerekTBrown Yes, I had installed xterm. And I solved it by defining private term: any. It also worked.