Search code examples
npmglobalintellisenseangular2-cli

Intellisense with 3rd part libraries and angular-cli

In a project created with angular2-cli I need to use some 3rd part javascript libraries that should be available in the global javascript scope (for example TWEEN namespace from the tween.js library).

Accordingly to the angular-cli guide to install a js library as global I've installed it with npm and add the library script in the "scripts" array of the angular-cli.json file.

"scripts": [
    "../node_modules/tween.js/src/Tween.js"
  ],

To use the global TWEEN namespace in an angular component I've declared it as a constant variable at the beginning of the file, like the following:

import { Component, OnInit } from '@angular/core';

declare const TWEEN: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  constructor() { }

  ngOnInit() {

    let tween = new TWEEN.Tween({x: 0}).to({x: 1}, 2000);

    // .. 

  }
}

This works, but the problem is that I am not getting any intellisense for any of the 3rd part libraries in this way (I am using WebStorm). Is there anything I can do to get intellisense working? Or are there better ways to import 3rd part javascript libraries in an angular 2 workflow?

Solution

  • You are never going to get intellisense this way, given that you are defining TWEEN at the top of your file as "any", hence saying it could be anything (no type, no intellisense).

    You should take a look at this post: https://weblog.west-wind.com/posts/2016/Sep/12/External-JavaScript-dependencies-in-Typescript-and-Angular-2
    It's pretty much telling you that you either have typings in the library itself, which come for free when you install it, or just work around not having the typings.

    If you are going to be working with libraries that have no typings at all, you might want to consider creating the typings yourself.