I've noticed similar questions but I'm still struggling to make it work...
My goal is to implement slick.js in my Angular application. I downloaded the necessary files and placed them in the assets folder.
I have added 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,
});
}
}
Based on my research about importing external JavaScript libraries into an Angular application, this should be working.. However, I'm encountering an error in vscode that says
[ts] Property 'slick' does not exist on type 'Element'.anyIn addition, in my console, I'm receiving the following error:
https://i.sstatic.net/IDc11.png
Any assistance would be highly appreciated!
Thank you!