Angular项目导入Avaya SDK提示非模块问题求助

你的问题根源很明确：你使用的Avaya SDK是**IIFE（立即执行函数表达式）**格式的脚本，它没有ES模块要求的export语句，而是直接将AvayaClientServices挂载到全局对象（比如window）上，所以用ES模块的import语法会触发“不是模块”的错误。

下面是几种可行的解决方法：

方法1：全局脚本引入（最常用） #

这是适配IIFE类SDK的标准做法：

1. 配置Angular构建脚本
   打开angular.json，找到你的项目配置节点，在build -> options -> scripts数组中按顺序添加SDK的三个JS文件路径：

   "scripts": [
     "src/assets/lib/[第一个依赖文件].js",
     "src/assets/lib/[第二个依赖文件].js",
     "src/assets/lib/AvayaClientServices.min.js"
   ]
   

   确保依赖文件顺序正确，SDK文件放在最后。

2. 添加TypeScript类型声明
   在项目根目录或src下创建typings文件夹，新建avaya.d.ts文件，声明全局变量：

   // 基础声明，足够直接使用
   declare var AvayaClientServices: {
     new(config: any): {
       createUser(userConfig: any): any;
       registerLogger(logger: any, level: any): void;
       getVersion(): string;
       // 可根据你需要使用的API补充更多类型
     };
   };
   

   如果不需要类型提示，直接用declare var AvayaClientServices: any;也可以。

3. 在组件中直接使用
   不需要写import语句，直接调用全局的AvayaClientServices：

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-avaya-client',
     templateUrl: './avaya-client.component.html'
   })
   export class AvayaClientComponent implements OnInit {
     ngOnInit(): void {
       const client = new AvayaClientServices({
         // 你的客户端配置
       });
       const user = client.createUser({
         // 用户配置
       });
     }
   }
   

方法2：动态按需加载 #

如果不需要在应用启动时就加载SDK，可以用动态注入脚本的方式按需加载：

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

@Component({
  selector: 'app-avaya-client',
  templateUrl: './avaya-client.component.html'
})
export class AvayaClientComponent implements OnInit {
  async ngOnInit(): Promise<void> {
    const AvayaClientServices = await this.loadAvayaSDK();
    const client = new AvayaClientServices({/* 配置 */});
    // 后续操作
  }

  private loadAvayaSDK(): Promise<any> {
    return new Promise((resolve) => {
      // 先检查是否已经加载过
      if ((window as any).AvayaClientServices) {
        resolve((window as any).AvayaClientServices);
        return;
      }

      const script = document.createElement('script');
      script.src = '../../../assets/lib/AvayaClientServices.min.js';
      script.onload = () => {
        resolve((window as any).AvayaClientServices);
      };
      // 处理加载失败情况
      script.onerror = () => {
        console.error('Avaya SDK加载失败');
        resolve(null);
      };
      document.body.appendChild(script);
    });
  }
}

注意：如果SDK有依赖的其他JS文件，需要先加载依赖文件再加载主SDK。

方法3：手动转为ES模块（不推荐） #

如果你能获取到SDK的未压缩源码，可以在文件末尾添加导出语句，将其转为ES模块：

// 在SDK源码的最后添加
export default AvayaClientServices;

之后就可以正常使用import导入：

import AvayaClientServices from '../../../assets/lib/AvayaClientServices.js';

但压缩后的min.js文件修改起来非常麻烦，且后续更新SDK时需要重复操作，所以不推荐这种方式。

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