Angular库导入web-sdk.js失败，应用内可正常使用的技术求助

原因分析 #

Angular应用的构建器对非ES模块脚本兼容性更高，而Angular库依赖的ng-packagr遵循更严格的ES模块规范。web-sdk.js大概率是通过全局变量暴露功能的脚本，并非标准ES模块，所以直接用ES模块导入语法会触发“'default' is not exported by...”报错。

解决方案 #

方案1：全局变量方式引入 #

• 在库项目的angular.json（或消费该库的应用angular.json）中，将web-sdk.js添加到scripts数组：

"scripts": [
  "你的web-sdk.js文件路径"
]

• 在库的服务中，通过声明全局变量调用功能：

declare var Zopim: any; // 替换为SDK实际暴露的全局变量名

@Injectable({ providedIn: 'root' })
export class LiveChatService {
  initSdk() {
    Zopim.livechat.init({ /* 你的配置参数 */ });
  }
}

方案2：配置模块解析兼容非ES模块 #

• 在库目录下创建类型声明文件（如web-sdk.d.ts），定义模块导出：

declare module '你的web-sdk.js文件路径' {
  const sdk: any;
  export default sdk;
}

• 修改库的tsconfig.lib.json，开启模块兼容配置：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

• 之后即可正常导入使用：

import sdk from '你的web-sdk.js文件路径';

@Injectable({ providedIn: 'root' })
export class LiveChatService {
  initSdk() {
    sdk.livechat.init({ /* 你的配置参数 */ });
  }
}

方案3：动态加载脚本 #

如果不想修改全局配置，可在服务中动态加载脚本：

@Injectable({ providedIn: 'root' })
export class LiveChatService {
  async initSdk() {
    const script = document.createElement('script');
    script.src = '你的web-sdk.js文件路径';
    document.body.appendChild(script);
    
    await new Promise(resolve => script.onload = resolve);
    
    // 调用全局变量下的功能
    (window as any).Zopim.livechat.init({ /* 你的配置参数 */ });
  }
}

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