Angular引入@eth-optimism/sdk后出现空白白屏问题求助

1. 修复变量引用错误 #

你代码里存在变量名不匹配的问题：导入SDK时用的是optimism，但实例化时却调用了未定义的sdk变量，这会引发ReferenceError，在Angular生产模式下这类错误可能被静默处理，最终导致白屏。

修正后的代码：

import * as optimism from "@eth-optimism/sdk";

// ...

async send() {
    try {
        const signer = await getEthersSigner({
            chainId: 5,
        })

        // 使用导入的optimism变量替代未定义的sdk
        let crossChainMessenger = new optimism.CrossChainMessenger(
            {
                l1ChainId: 5,
                l2ChainId: 420,
                l1SignerOrProvider: signer,
                l2SignerOrProvider: new ethers.providers.JsonRpcProvider(
                    "https://goerli.optimism.io"
                ),
            }
        );
    } catch (err) {
        // 捕获并打印错误，方便排查问题
        console.error("初始化CrossChainMessenger失败:", err);
    }
}

2. 添加错误捕获逻辑 #

异步函数中未包裹try/catch会导致错误被吞噬，无法在控制台看到具体问题。必须在send方法中添加错误捕获，确保异常能被输出到控制台。

3. 配置Angular允许CommonJS依赖 #

@eth-optimism/sdk及其依赖（如ethers）属于CommonJS模块，Angular默认不会转译node_modules中的CommonJS模块，可能导致运行时错误。需要在angular.json中添加配置：

找到architect -> build -> options，新增allowedCommonJsDependencies字段：

"options": {
  // ...其他已有配置
  "allowedCommonJsDependencies": [
    "@eth-optimism/sdk",
    "ethers",
    "@eth-optimism/core-utils",
    "@eth-optimism/contracts"
  ]
}

4. 检查依赖版本兼容性 #

确保@eth-optimism/sdk与ethers的版本匹配，当前SDK通常要求ethers v5.x版本（v6版本存在API不兼容问题）。查看SDK的package.json确认依赖版本后，执行以下命令安装兼容版本：

npm install ethers@^5.7.2 @eth-optimism/sdk --save

5. 验证Signer有效性 #

确认getEthersSigner函数返回的是有效的ethers Signer实例，而非undefined或错误对象。可以在获取signer后添加日志验证：

const signer = await getEthersSigner({ chainId: 5 });
console.log("获取到的Signer:", signer);
if (!signer) {
    throw new Error("未获取到有效的Signer");
}

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