Alertify 未在 Angular 中定义问题：12.0.4

Question

我尝试通过一些在线课程学习 angular。当我尝试使用 Alertify 时，我收到一条错误消息：“alertify 未在 ProductComponent.addToCart 处定义”。我在下面分享相关代码；

angular.json（我试图将路径更改为“../node_modules..所以开始双点但没有修复它。）

 "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"
            ]

还尝试使用 styles.css 文件导入；

@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
      >

此 AddCart 功能在不使用 alertify 的情况下也能正常工作（例如简单的 alert("Added") 工作正常）。

我检查了 Alertifyjs 所在的路径，所有需要的文件都在那里。

Answer 1

当您向 Angular 添加新库时，此文件应包含脚本数组

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

另外应该是样式数组

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

导入后如下所示

import * as alertify from 'alertify';

有关更多信息，您可以查看官方 Angular 文档

Alertify 未在 Angular 中定义问题：12.0.4

Alertify is not defined problem in Angular: 12.0.4

typescript

alertifyjs

angular