Angular 14中从服务动态加载脚本遇错求助

你遇到的浏览器报错ReferenceError: _hj is not defined，是因为Hotjar脚本依赖全局配置对象_hjSettings，直接加载脚本前未初始化该配置，会导致脚本执行时找不到必要的全局变量。

核心修复步骤 #

• 在加载Hotjar脚本之前，先在全局window对象上定义_hjSettings配置，包含你的Hotjar ID和版本号。
• 确保配置先于脚本加载执行，这样脚本初始化时就能读取到正确的配置并创建_hj变量。

修改后的服务代码 #

基础实现（直接操作Document） #

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class HotjarService {

  constructor() { }

  loadHotjar(): void {
    // 先初始化Hotjar全局配置
    (window as any)._hjSettings = {
      hjid: environment.hotjar.id,
      hjsv: environment.hotjar.version
    };

    const script = document.createElement('script');
    script.async = true;
    script.src = `https://static.hotjar.com/c/hotjar-${environment.hotjar.id}.js?sv=${environment.hotjar.version}`;
    document.head.appendChild(script);
    
    script.onload = () => {
      console.log('Hotjar加载成功');
    };
    
    script.onerror = () => {
      console.error('Hotjar脚本加载失败');
    };
  }
}

符合Angular最佳实践的实现（使用Renderer2） #

避免直接操作原生document对象，改用Angular提供的Renderer2来操作DOM，更适配Angular的变更检测机制：

import { Injectable, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class HotjarService {

  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) { }

  loadHotjar(): void {
    // 初始化全局配置
    (window as any)._hjSettings = {
      hjid: environment.hotjar.id,
      hjsv: environment.hotjar.version
    };

    const script = this.renderer.createElement('script');
    this.renderer.setProperty(script, 'async', true);
    this.renderer.setProperty(script, 'src', `https://static.hotjar.com/c/hotjar-${environment.hotjar.id}.js?sv=${environment.hotjar.version}`);
    
    this.renderer.listen(script, 'load', () => {
      console.log('Hotjar加载成功');
    });
    
    this.renderer.listen(script, 'error', () => {
      console.error('Hotjar脚本加载失败');
    });

    this.renderer.appendChild(this.document.head, script);
  }
}

额外注意事项 #

• 确保environment.hotjar.id和environment.hotjar.version是正确的数值类型（而非字符串），Hotjar配置要求这两个值为数字。
• 保留脚本的async属性，避免阻塞页面渲染。

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