I am currently attempting to incorporate various jquery plugins, such as Magnific-Popup, into my Angular 4 application but encountering difficulties. I successfully installed jQuery using
npm install --save-dev @types/jquery@Component({
selector: 'app-showcase',
templateUrl: './showcase.component.html',
styleUrls: ['./showcase.component.css']
})
export class ShowcaseComponent implements OnInit {
@ViewChild("elementRef") elref2: ElementRef;
constructor(private elRef: ElementRef) { }
ngOnInit() {
jQuery(this.elref2.nativeElement).magnificPopup();
}
ngAfterViewInit() {
}
To have TypeScript acknowledge the magnificPopup() function, I imported scripts from the magnificPopup documentation into my index.html (placed at the bottom of the body tag). However, it appears that this approach is not functioning correctly, with Webstorm indicating "cannot resolve file jquery.magnific-popup.js". While loading the jquery.min script works fine, attempts to npm-install magnific-popup were unsuccessful. I also experimented with adding the script to the angular.JSON file, but without success.
Therefore, I seek guidance on properly installing and utilizing a third-party jQuery plugin like magnific-popup within my Angular 4 application.
Your assistance would be greatly appreciated. Thank you.