Angular 2如何从服务器按需加载JS并在当前作用域运行？

嘿，我来帮你梳理下在Angular 2应用里处理这种动态加载游戏脚本的靠谱方案——毕竟直接手动插<script>标签到头部，很容易踩加载时机、作用域或者安全方面的坑：

1. 用Angular原生API安全加载脚本 #

别自己手动拼接DOM元素了，Angular的Renderer2是更规范的动态创建元素方式，还能帮你监听加载状态：

组件内实现动态加载逻辑 #

import { Component, Renderer2, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-game-container',
  template: '<div id="game-host"></div>'
})
export class GameContainerComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    const targetGameId = 'your-target-game-id'; // 替换成实际的游戏ID
    this.loadAndInitGame(targetGameId);
  }

  private loadAndInitGame(gameId: string): void {
    const script = this.renderer.createElement('script');
    script.src = `/api/games/${gameId}`;
    script.type = 'text/javascript';

    // 脚本加载完成后再初始化游戏，避免找不到SeedGame类
    script.onload = () => {
      console.log(`游戏${gameId}脚本加载完成`);
      this.startGame(gameId);
    };

    // 处理加载失败的情况
    script.onerror = () => {
      console.error(`游戏${gameId}脚本加载失败，请检查API端点`);
      // 这里可以加用户友好的错误提示，比如显示"游戏加载失败，请重试"
    };

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

  private startGame(gameId: string): void {
    const gameHost = this.document.getElementById('game-host');
    // 脚本加载后SeedGame会挂载到全局window对象上
    if (gameHost && window.SeedGame) {
      // 根据你的游戏类参数初始化，这里只是示例
      const gameInstance = new window.SeedGame(800, 600, 'canvas', gameHost.id);
      // 调用游戏的启动方法，比如gameInstance.start()
    }
  }
}

2. 解决TypeScript的全局类型提示问题 #

因为SeedGame是挂载在window上的全局对象，TypeScript会报“找不到名称”的错误，你可以在项目里加个全局类型声明文件解决：

// 在src目录下创建typings.d.ts，添加以下内容
declare interface Window {
  SeedGame: new (width: number, height: number, renderMode: string, containerId: string) => any;
  // 可以根据你的SeedGame类实际定义，完善这个类型的属性和方法
}

3. Express端点的响应头优化 #

确保你的Express API返回正确的响应头，让浏览器正确识别这是JavaScript文件，还能加缓存优化加载速度：

app.get('/api/games/:id', (req, res) => {
  const gameId = req.params.id;
  // 这里替换成你根据gameId获取脚本内容的逻辑
  const gameScript = getGameScript(gameId);

  // 设置正确的Content-Type
  res.setHeader('Content-Type', 'application/javascript');
  // 添加缓存头，让浏览器缓存脚本一天，减少重复请求
  res.setHeader('Cache-Control', 'public, max-age=86400');
  res.send(gameScript);
});

4. 避免重复加载脚本 #

如果用户可能多次进入游戏页面，你可以把加载逻辑封装成单例服务，确保同一个游戏脚本只加载一次：

// game-loader.service.ts
import { Injectable, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class GameLoaderService {
  private loadedGameIds = new Set<string>();

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

  loadGame(gameId: string): Promise<void> {
    // 如果已经加载过，直接返回成功
    if (this.loadedGameIds.has(gameId)) {
      return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
      const script = this.renderer.createElement('script');
      script.src = `/api/games/${gameId}`;
      script.type = 'text/javascript';

      script.onload = () => {
        this.loadedGameIds.add(gameId);
        resolve();
      };

      script.onerror = () => {
        reject(new Error(`加载游戏${gameId}失败`));
      };

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

然后在组件里用这个服务：

// 组件里注入服务
constructor(private gameLoader: GameLoaderService, ...) {}

// 在ngOnInit里调用
ngOnInit(): void {
  const gameId = 'your-game-id';
  this.gameLoader.loadGame(gameId)
    .then(() => this.startGame(gameId))
    .catch(err => console.error(err));
}

这样一套下来，既能保证脚本加载的可控性，解决类型提示问题，还能优化加载性能，避免重复请求~

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