为Angular项目封装google-closure-library变量的方案咨询

首先，这个错误的核心原因是Google Closure Library的全局goog对象在web-gl-earth2模块加载/执行时还未被初始化或暴露。Angular的模块加载机制和Closure的依赖系统之间存在冲突，不过不用急着重写源码，先试试下面这些方案：

一、先检查并调整依赖加载顺序 #

这是最容易忽略但最有效的第一步：确保Closure Library的核心文件在web-gl-earth2之前被加载。

如果用Angular CLI，修改angular.json的scripts数组，把Closure的入口文件放在最前面：

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/google-closure-library/closure/goog/base.js",
              "node_modules/web-gl-earth2/main.js"
            ]
          }
        }
      }
    }
  }
}

如果是手动管理index.html的脚本引入，也要遵循同样的顺序：先引入base.js，再引入web-gl-earth2的文件。

调试小技巧：在浏览器控制台执行console.log(window.goog)，确认web-gl-earth2加载前goog已经存在。

二、用自动化构建工具处理Closure依赖 #

1. Webpack 配置 externals #

如果项目用Webpack，可以把Closure Library声明为外部依赖，让Webpack从全局变量中读取goog，而不是尝试打包它：

// webpack.config.js
module.exports = {
  // ...其他配置
  externals: {
    'google-closure-library': 'goog'
  }
};

同时确保base.js在项目入口前加载（可以通过html-webpack-plugin自动注入，或者手动在index.html引入）。

2. Rollup 插件处理 #

如果用Rollup，可以使用rollup-plugin-globals将Closure Library映射到全局goog：

// rollup.config.js
import globals from 'rollup-plugin-globals';

export default {
  // ...其他配置
  plugins: [
    globals({
      'google-closure-library': 'goog'
    })
  ],
  external: ['google-closure-library']
};

3. 封装成Angular组件库（用ng-packagr） #

如果想长期在Angular项目中复用web-gl-earth2，可以把它封装成一个Angular组件库。使用ng-packagr时，在ng-package.json中配置依赖，并确保Closure的goog对象在组件初始化前可用：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "google-closure-library": "goog"
    }
  }
}

然后在组件类中确保goog已初始化后再调用web-gl-earth2的方法。

三、是否需要重写源码？ #

不一定非要全量重写，但如果上述方案都无法解决，或者你希望模块更适配Angular的ES模块系统，可以考虑局部改造：

• 替换Closure的goog.require、goog.provide等语法为ES6的import/export
• 将Closure风格的类转换为ES6类
• 移除不必要的Closure依赖，改用Angular内置的工具（比如依赖注入替代Closure的依赖管理）

这种改造虽然需要一些工作量，但能从根本上解决模块间的依赖冲突，让集成更顺滑。

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