如何在Angular中无需全局URL和变量即可安全加载外部脚本

你可以从两个维度分别优化原有方案的问题，以下是可直接落地的实现：

1. 消除全局URL字符串定义 #

不要直接在组件内定义常量存储脚本地址，改用Angular原生的环境配置+注入令牌托管所有外部脚本地址：

步骤1：在环境配置文件中声明脚本地址 #

修改src/environments/environment.ts（生产环境对应environment.prod.ts）：

export const environment = {
  production: false,
  externalScripts: {
    googleApi: 'https://apis.google.com/js/api.js'
  }
};

步骤2：用注入令牌托管配置，避免全局导出 #

新建src/tokens/scripts.token.ts：

import { InjectionToken } from '@angular/core';
import { environment } from '../environments/environment';

export const APP_EXTERNAL_SCRIPTS = new InjectionToken<Record<string, string>>(
  'External scripts config',
  {
    providedIn: 'root',
    factory: () => environment.externalScripts
  }
);

后续需要使用脚本地址时直接注入该令牌即可，无需全局定义URL常量。

2. 消除全局变量声明（如declare let gapi: any） #

通过封装ScriptService，将加载完成的第三方实例通过Observable透出，不需要在全局作用域声明变量：

优化后的ScriptService实现 #

import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Observable, ReplaySubject } from 'rxjs';
import { APP_EXTERNAL_SCRIPTS } from '../tokens/scripts.token';

@Injectable({ providedIn: 'root' })
export class ScriptService {
  private renderer: Renderer2;
  // 缓存已加载的脚本实例，避免重复加载
  private loadedScripts = new Map<string, ReplaySubject<any>>();

  constructor(
    @Inject(DOCUMENT) private document: Document,
    @Inject(APP_EXTERNAL_SCRIPTS) private scriptConfig: Record<string, string>,
    private rendererFactory: RendererFactory2
  ) {
    this.renderer = this.rendererFactory.createRenderer(null, null);
  }
 
  public loadJsScript(scriptKey: string): Observable<any> {
    // 已加载过直接返回缓存实例
    if (this.loadedScripts.has(scriptKey)) {
      return this.loadedScripts.get(scriptKey).asObservable();
    }

    const scriptSubject = new ReplaySubject<any>(1);
    this.loadedScripts.set(scriptKey, scriptSubject);

    const src = this.scriptConfig[scriptKey];
    if (!src) {
      scriptSubject.error(new Error(`未找到对应脚本配置：${scriptKey}`));
      return scriptSubject.asObservable();
    }

    const script = this.renderer.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    script.onload = () => {
      // 直接从window上取对应实例返回，不需要全局声明
      const instance = window[scriptKey as keyof Window];
      scriptSubject.next(instance);
      scriptSubject.complete();
    };

    script.onerror = () => {
      scriptSubject.error(new Error(`脚本加载失败：${src}`));
      this.loadedScripts.delete(scriptKey);
    };

    this.renderer.appendChild(this.document.body, script);
    return scriptSubject.asObservable();
  }
}

组件内使用示例（无任何全局定义） #

import { Component, OnInit } from "@angular/core";
import { ScriptService } from "./services/script.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  constructor(private scriptService: ScriptService) { }
 
  ngOnInit() {
    this.scriptService.loadJsScript('googleApi').subscribe({
      next: (gapi) => {
        console.log('Google API Script loaded', gapi);
        // 直接使用返回的gapi实例即可
        gapi.load('client', this.init);
      },
      error: () => {
        console.log('Could not load the Google API Script!');
      }
    })
  }

  private init = () => {
    // 初始化逻辑
  }
}

如果需要更严格的类型安全，可以在全局类型定义中扩展Window接口的属性，不需要在业务代码中声明全局变量：

// src/types/window.d.ts
interface Window {
  googleApi?: typeof import('@types/gapi');
}

额外安全优化 #

如果使用Angular 14+版本，可以开启Trusted Types配置，将脚本地址标记为可信资源，进一步降低XSS风险，不需要额外修改现有加载逻辑。

内容的提问来源于stack exchange，提问作者Adventitious Angles Qs Poster