question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Loading Addons in Angular 2 / Typescript

See original GitHub issue

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();
		}

  }

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
GavinSong123commented, Jul 19, 2017

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

0reactions
Tyriarcommented, Jul 18, 2017

@DerekTBrown https://github.com/sourcelair/xterm.js/issues/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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular2: Loading modules dynamically from a given folder
1 Answer 1 · First : dynamic.module. · Second : here is the component which dynamically loads module when you give it the...
Read more >
External JavaScript dependencies in Typescript and Angular 2
Angular 2.0 and Typescript make it very easy to import external Typescript classes and references using the module loading functionality ...
Read more >
Configure Storybook
.storybook/main.js module.exports = { addons: ... By default, Storybook will load stories from your project based on a glob (pattern matching string) in ......
Read more >
storybook/addon-docs - npm
Start using @storybook/addon-docs in your project by running `npm i ... TypeScript icon, indicating that this package has built-in type ...
Read more >
How to setup an Angular 2 and TypeScript project with Visual ...
How to setup an Angular 2 and TypeScript project with Visual Studio 2017 · Create new ASP.NET Core web application · Create the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found