Angular组件动态追加外部脚本时全局重复加载且无法销毁问题

问题根源 #

• 原实现通过全局document.getElementById获取挂载容器，脚本节点直接关联全局DOM，和当前组件的生命周期完全脱钩，组件销毁时不会自动回收对应DOM
• 没有做脚本存在性校验，只要组件触发加载逻辑，就会重复创建、追加同地址的script节点，造成网络请求冗余、脚本重复执行
• 硬编码全局元素id的写法，在多组件复用场景下很容易命中其他组件的同名DOM，根本没法精准控制要销毁的节点

落地解决步骤 #

1. 绑定组件生命周期，实现DOM精准销毁 #

• 移除模板里div的全局id，改用Angular模板引用变量+@ViewChild拿组件内部的容器元素引用，全程通过Renderer2操作DOM，不直接调用原生API
• 把脚本创建、挂载的逻辑放到ngAfterViewInit生命周期钩子中，等组件视图渲染完成后再执行DOM操作
• 在组件的ngOnDestroy销毁钩子里，手动移除之前挂载的script节点，组件销毁时不会留下全局DOM残留

修正后的TS核心逻辑：

// 不再硬编码全局id，直接通过模板引用拿组件内部容器
@ViewChild('scriptContainer') scriptContainer!: ElementRef<HTMLDivElement>;

ngAfterViewInit() {
  // 前置去重判断见后续步骤
  this.script = this._renderer2.createElement('script');
  this.script.type = 'text/javascript';
  this.script.src = url;
  this.script.async = true;
  // 把脚本挂在组件内部的容器上，而非全局document
  this._renderer2.appendChild(this.scriptContainer.nativeElement, this.script);
}

ngOnDestroy() {
  // 组件销毁时同步移除挂载的脚本节点
  if (this.script?.parentNode) {
    this._renderer2.removeChild(this.script.parentNode, this.script);
    this.script = null;
  }
}

修正后的模板代码（去掉无意义的全局id）：

<div #scriptContainer></div>

2. 增加全局去重校验，避免重复加载 #

• 每次创建script节点之前，先通过DOM选择器检查当前页面是否已经存在同src的script节点
• 如果已存在对应节点，直接跳过创建流程，复用已有脚本实例，不会触发重复的网络请求、也不会重复执行脚本逻辑

// 脚本加载前置校验
const existingScript = document.querySelector(`script[src="${url}"]`);
if (!existingScript) {
  // 不存在对应脚本时，才走创建、挂载流程
  this.script = this._renderer2.createElement('script');
  // 后续挂载逻辑同上
}

该逻辑主要解决同页面多组件同时引用同一外部脚本时的重复加载问题，组件销毁时移除对应节点后，下次组件重建会按正常逻辑重新挂载脚本，符合组件独立渲染的预期。

3. 长期优化：抽离公共脚本加载服务 #

• 可以把动态加载脚本的逻辑封装为全局可注入的Angular服务，内部维护已加载脚本的缓存Map（key为脚本url，value为对应的加载状态Promise、DOM节点引用）
• 所有组件通过该服务加载外部脚本时，直接从缓存中获取加载状态，不需要自行判断是否重复加载、也不需要重复编写DOM销毁逻辑，实现全局统一管控

注意：不要把创建好的script节点直接追加到全局body/head下，这类全局挂载的节点不会随组件销毁自动回收，长期运行会造成DOM节点冗余、内存泄漏。

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