Trying to use external Javascript library in angular 5

Question

I'm aware there are similar questions but I still can not get it to work..

So I want to use slick.js so I downloaded the files and put it in my assets folder in my angular application

Ive imported the libraries in my

angular.cli.json

"styles": [
    "./assets/scripts/slick-1.8.0/slick.css",
    "./assets/scripts/slick-1.8.0/slick-theme.css"
],
"scripts": [
    //jQuery imports above
    "./assets/scripts/slick-1.8.0/slick.min.js"
]

then In my component...

import { Component, OnInit, Injector } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as Slick from '../../../../assets/scripts/slick-1.8.0/slick/slick.min.js';
@Component({
    selector: 'app-di-type2',
    templateUrl: './di-type2.component.html',
    styleUrls: ['./di-type2.component.scss']
})

export class DiType2Component extends AppComponentBase implements OnInit {

   public constructor(
    injector: Injector
   ) {
     super(injector);
   }

   ngOnInit() {
      const slideContainer = document.querySelector('.slider');
      slideContainer.slick({
         autoplay: true,
         autoplaySpeed: 3500,
      });
   }

}

from what Ive read about importing external javascript libraries into angular application this should work.. Im getting an error in vscode that says [ts] Property 'slick' does not exist on type 'Element'.any

and then in my console im getting

any help would be appreciated!

Thanks!

Answer 1

如果在index.html中导入脚本，则可以在组件中导入后将库声明为类型为“any”的var（假设它没有输入定义* .d.ts）：

declare let <yourlib>: any;

Answer 2

Install Slick.js using Node and NPM

https://nodejs.org/

npm install slick-carousel --save

https://www.npmjs.com/package/slick-carousel

Once you install this npm, it'll be saved as a dependency in your package.json file.

Then import Slick:

import 'slick-carousel';

someElement.slick();