Alertify is not defined problem in Angular: 12.0.4

Question

I've try to learn angular with some online courses. When I'am trying to use Alertify i'm getting an error saying :"alertify is not defined at ProductComponent.addToCart". I share related codes below;

angular.json ( i tried to change path as "../node_modules.." so start double dot but didn't fix it.)

 "styles": [
              "src/styles.css",
              "./node_modules/alertifyjs/build/css/alertify.min.css",
              "./node_modules/alertifyjs/build/css/themes/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/alertifyjs/build/alertify.min.js"
            ]

also tried import with styles.css file;

@import "~alertifyjs\build\css\alertify.min.css";
@import "~alertifyjs\build\css\themes\bootstrap.min.css"

component.ts;

import { Product } from './product';
declare let alertify: any;
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  constructor() { }
  title ="Ürün Listesi";
  filterText="";
  products : Product[] = [
    {id:1, name:"Laptop", price:2500, categoryId:1, description:"Asus ZenBook",imageUrl:"https://images.unsplash.com/photo-1588702547923-7093a6c3ba33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
    {id:2, name:"Mouse", price:300, categoryId:2, description:"Logitech G502",imageUrl:"https://images.unsplash.com/photo-1588440241012-ffd0331a05a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZzUwMnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"},
    {id:3, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
    {id:1, name:"Laptop", price:2500, categoryId:1, description:"Asus ZenBook",imageUrl:"https://images.unsplash.com/photo-1588702547923-7093a6c3ba33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
    {id:2, name:"Mouse", price:300, categoryId:2, description:"Logitech G502",imageUrl:"https://images.unsplash.com/photo-1588440241012-ffd0331a05a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZzUwMnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"},
    {id:3, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
    {id:1, name:"Laptop", price:2500, categoryId:1, description:"Asus ZenBook",imageUrl:"https://images.unsplash.com/photo-1588702547923-7093a6c3ba33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
    {id:2, name:"Mouse", price:300, categoryId:2, description:"Logitech G502",imageUrl:"https://images.unsplash.com/photo-1588440241012-ffd0331a05a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZzUwMnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"},
    {id:3, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
    {id:5, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},

  ];

  ngOnInit(): void {
  };
  
  addToCart(product:any){
    
    alertify.success('Başarıyla eklendi.');
  

component.html;

  <a (click)="addToCart(product)" class="btn btn-primary action"
        >Sepete ekle</a
      >

This AddCart function work properly without using alertify ( such as simple alert("Added") works fine).

I checked path Alertifyjs located and all required file exist in there.

Answer 1

When you add new libraries to Angular this file should have the scripts array

"scripts": [
  "node_modules/alertifyjs/build/alertify.min.js"
],

And separately should be the styles array

"styles": [
  "src/styles.css"
  "node_modules/alertifyjs/build/css/alertify.min.css",
  "node_modules/alertifyjs/build/css/themes/bootstrap.min.css"
],

After that you can import it as follows

import * as alertify from 'alertify';

For more info you can check the official Angular docs

• https://angular.io/guide/using-libraries#adding-a-library-to-the-runtime-global-scope
• https://angular.io/guide/using-libraries#using-runtime-global-libraries-inside-your-app