Angular 2 - Using External Libraries

Question

I recently started using Angular2 (type script) and everything is going well until I tried to import an external javascript library https://github.com/marchock/vertical-blocks. I have tried a few methods but nothing works and I usually get an error displaying the library is not defined.

Answer 1

This is a global library so you do not need to import this. Instead use it as you would normally ex:

@Component({...})
export class ExampleComponent{
    verticalBlocks: any;

    ngOnInit(){
        this.verticalBlocks = new VerticalBlocks({
           ...    
        });
    }
}

and instead of import simply declare the variable VerticalBlocks so that TypeScript doesn't complain about you using it and knows that it's a global library using

declare var VerticalBlocks: any;

at the top of your .ts file.

Then simply add the script in your html as usual:

<script src="path/to/verticalblocks.js"></script>