如何将ng2-google-charts的loader.js从远程改为本地加载？

DevOps 小满

2026-5-22

嘿，我懂你想把ng2-google-charts依赖的远程loader.js换成本地加载的需求——直接修改node_modules里的文件确实是个直观的思路，但有个致命问题：下次执行npm install或者更新这个依赖时，你的修改会被彻底覆盖掉。下面给你两种解决方案，一种是快速临时生效的，另一种是更靠谱的持久化方案：

方案一：临时修改（快速生效，但不持久）

第一步，先把https://www.gstatic.com/charts/loader.js的完整内容下载到本地，比如放到你的Angular项目的assets/js目录下，命名为google-charts-loader.js。

第二步，找到你提到的文件/home/kleber/angular/escola/node_modules/ng2-google-charts/google-charts-loader.service.js，修改loadGoogleChartsScript方法里的脚本源地址：
把原来指向远程的script.src替换成你的本地路径，修改后的代码大概是这样：

GoogleChartsLoaderService.prototype.loadGoogleChartsScript = function () {
  var _this = this;
  return new Promise(function (resolve, reject) {
    if (resolve === void 0) { resolve = Function.prototype; }
    if (reject === void 0) { reject = Function.prototype; }
    if (_this.loaded) {
      resolve();
      return;
    }
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 替换为本地loader的路径
    script.src = '/assets/js/google-charts-loader.js';
    script.onload = function () {
      _this.loaded = true;
      google.charts.load('current', { packages: ['corechart'] });
      google.charts.setOnLoadCallback(resolve);
    };
    script.onerror = reject;
    document.body.appendChild(script);
  });
};

保存文件后重启你的Angular应用，就能加载本地的loader.js了。
注意：这个方法的弊端非常明显——每次更新ng2-google-charts或者执行npm install后，你都得重复上述修改操作。

方案二：持久化自定义服务（推荐）

这个方案不需要修改node_modules里的任何文件，而是通过Angular的依赖注入机制，替换掉原有的加载服务，彻底避免被依赖更新覆盖的问题：

和方案一一样，先把loader.js下载到本地assets/js/google-charts-loader.js目录下。

在你的项目中创建一个自定义加载服务，比如src/app/services/custom-google-charts-loader.service.ts，代码如下：

import { Injectable } from '@angular/core';
import { GoogleChartsLoaderService } from 'ng2-google-charts';

@Injectable({
  providedIn: 'root'
})
export class CustomGoogleChartsLoaderService extends GoogleChartsLoaderService {
  loaded = false;

  override loadGoogleChartsScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      if (this.loaded) {
        resolve();
        return;
      }
      const script = document.createElement('script');
      script.type = 'text/javascript';
      // 指向本地的loader文件
      script.src = '/assets/js/google-charts-loader.js';
      script.onload = () => {
        this.loaded = true;
        // 这里可以根据你的业务需求调整要加载的图表包
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(() => resolve());
      };
      script.onerror = reject;
      document.body.appendChild(script);
    });
  }
}

打开你的AppModule（通常在src/app/app.module.ts），在providers数组中替换原有的服务：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GoogleChartsModule } from 'ng2-google-charts';
import { GoogleChartsLoaderService } from 'ng2-google-charts';
import { CustomGoogleChartsLoaderService } from './services/custom-google-charts-loader.service';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GoogleChartsModule],
  providers: [
    // 用自定义服务替换原有的加载服务
    { provide: GoogleChartsLoaderService, useClass: CustomGoogleChartsLoaderService }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

重启你的Angular应用，现在框架会自动使用你自定义的服务来加载本地的loader.js，而且无论后续怎么更新依赖，这个配置都不会失效。

额外提醒：如果你的业务场景需要把谷歌图表的其他依赖资源（比如语言包、特定图表的脚本）也本地化，那你需要把对应的资源也下载到本地，然后修改loader.js内部的资源引用路径——不过这个步骤相对复杂，大多数场景下只本地化loader.js就足够满足需求了。

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