Angular集成Cloudinary Upload Widget报错：找不到cloudinary求解决

你遇到的问题是TypeScript无法识别全局的cloudinary变量——通过<script>标签引入的全局对象默认不会被TypeScript类型系统识别。以下是两种有效解决方法：

方法1：声明全局变量（快速解决） #

在你的组件文件顶部（import语句之后）添加全局变量声明，告诉TypeScript这个变量是存在的：

import { Component, OnInit } from '@angular/core';

// 声明全局cloudinary变量
declare var cloudinary: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  cloudName = '你的云名称';
  uploadPreset = '你的上传预设';
  myWidget: any;

  ngOnInit() {
    this.myWidget = cloudinary.createUploadWidget(
      {
        cloudName: this.cloudName,
        uploadPreset: this.uploadPreset
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          console.log("上传完成！图片信息: ", result.info);
          const imgElement = document.getElementById("uploadedimage");
          if (imgElement) {
            imgElement.setAttribute("src", result.info.secure_url);
          }
        }
      }
    );
  }
}

方法2：安装类型定义包（更规范的方式） #

安装Cloudinary的官方TypeScript类型定义，让TypeScript能识别cloudinary的完整类型：

npm install @types/cloudinary --save-dev

安装完成后，无需手动声明全局变量，直接在组件中使用cloudinary即可，TypeScript会自动识别其类型。

额外注意事项 #

• CloudinaryModule是Angular专属的SDK组件（用于图片展示、转换等），和上传Widget的全局脚本是独立的，你之前的导入操作不影响上传Widget的使用，可以保留。
• 确保index.html中的<script>标签在Angular应用初始化前加载完成，建议将其放在<body>标签的末尾，避免因脚本未加载导致的cloudinary is undefined运行时错误。
• 如果仍出现运行时错误，可以在ngAfterViewInit钩子中初始化上传Widget，确保DOM和外部脚本都已加载完毕。

内容的提问来源于stack exchange，提问作者Phil