importJStoAngular.md

Import JavaScript library into Angular

SOURCE, SOURCE

What works in Angular 7:

The JS library trie-search doesn't have the definition .dt.ts file to be used in TypeScript file. so we need to use the following method in order to use it.

Tips: using Type Search to see if there's any pre created .d.ts for your library SOURCE.

1. Add links to your JS library in angular.json:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
              "node_modules/slick-carousel/slick/slick.min.js",
              "node_modules/hasharray/dist/HashArray.js", // TriSearch also use this library
              "node_modules/trie-search/src/TrieSearch.js"
            ]
          },

2. Stop and build project again with ng s.

3. After this, you can declare and use TrieSearch as the following:

declare var TrieSearch: any;

@Component({
  selector: 'app-find-doctor',
  templateUrl: './find-doctor.component.html',
  styleUrls: ['./find-doctor.component.scss']
})
export class FindDoctorComponent implements OnInit {

  ....
  
  const ts = new TrieSearch();
}

4. If it doesn't work, then use this method instead. Create this file src/typings.d.ts with the following:

declare module 'hasharray';
declare module 'trie-search';

5. Then import and use it like this:

import * as TrieSearch from 'trie-search';

const ts: any = new TrieSearch();