angulartypescriptalertifyjs

Alertify is not defined problem in Angular: 12.0.4

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.

Solution

  • 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