Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I am working on angular 2 project with angular-cli (1.0.0-beta.10) and want to use this library (https://github.com/Glench/fuzzyset.js). When I try to import it, Typescript is not accepting it as a module I don’t really know why. It gives me Cannot find module error.

As a workaround I tried to declare it as module in my system-config.ts file

declare module "fuzzyset" {}

I am importing it in one of my component like this

import * as FuzzySet from 'fuzzyset';

and added to System Config:

System.config({
  paths: {
    // paths serve as alias
    'npm:': 'vendor/'
  },

  map: {
    'fuzzyset': 'npm:fuzzyset.js/index.js',
  },
  packages: cliSystemConfigPackages
});

But now it gives Cannot invoke an expression whose type lacks a call signature.

To solve this error I changed the module declaration to this:

declare module "fuzzyset" {
    export function FuzzySet(options?:any): any;
}

This does work in a way that everything is compiled, but then I am getting error at runtime as follow: Browser console errors

Can anyone help me on this? Thanks in advance :)

share|improve this question
up vote 1 down vote accepted

I am able to solve the issue. It had some module definition issues and Typescript was not identifying it as a module. Modifying the definition in the library did work but that wasn't the right way. The end solution that worked without modifying the library was to add its definition in typings.d.ts. In case you want to see the code:

declare module "fuzzyset" {
     function FuzzySet(options?: FuzzySet.FuzzySetOptions) : any;
     namespace FuzzySet {
         interface FuzzySetOptions {
             arr?: any;
             useLevenshtein?: any;
             gramSizeLower?: any;
             gramSizeUpper?: any;
         }
     }
     export = FuzzySet;
}
share|improve this answer
up vote 0 down vote

Just simply use:

in app.ts

import fuzzyset from 'fuzzyset' (app.ts)

in config.ts

map: {
    'fuzzyset': 'npm:fuzzyset.js/lib/fuzzyset.js',
}

class definition,

        export class App {

      a: any;  // fuzzyset
      printThis: array;
      name:string;
      constructor() {
        // start doing fuzzy stuff
        this.a = FuzzySet()  

        this.a.add("michael axiak");

        this.printThisVar = this.a.get("micael asiak");
        // end doing fuzzy stuff
        this.name = 'Angular2'
      }
    }

in @component:

<p>{{printThisVar}}</p>

Working Plnkr here

Refer this and this

share|improve this answer
    
Thanks for the reply. Are you using Angular 2? Because it doesn't work for me it keeps giving me Cannot find module – Kushina Oct 20 '16 at 10:31
    
yes. Angular 2.1.0. check config.js. Uses angular/core npm, whose latest is 2.1.0 - refer this. Did you try removing that declare module and simply import FuzzySet from 'fuzzyset'. I am afraid, if you are making it complicated than needed to import a simple javascript exported module. – Mahesh Oct 20 '16 at 11:26
    
Thanks for the answer but it didn't work for me. – Kushina Oct 25 '16 at 10:32
    
If you are not using Systemjs and its config file config.js, as I had provided above, it will definitely NOT work. The Systemjs is recommended in both Angular2 (since you have tags Angular2, you are using it, I know that and I didn't even try Angular1, just so we are clear). SImilarly typescript also recommends it in their documentation. Also from System config documentation - "System Config is Built to the format ES6-specified loader API from ES6 Specification Draft Rev 27, Section 15,". If you are building something on your own, it is only repetitive unproductive work, just my 2 cents. – Mahesh Oct 25 '16 at 11:50
    
I suggest you take a look at the code I provided before complaining. All you have done above is wrap the FuzzySet inside another module, to make your declaration to work. Because you didn't have a module, now you create one and drop FuzzySet into it. If you want to overdo things, well that I can't help, really. – Mahesh Oct 25 '16 at 11:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.