Angular组件中TradingView Widget无法加载的问题求助

问题根源 #

1. 异步脚本加载时机冲突：index.html中添加的脚本使用了async属性，可能在组件ngAfterViewInit钩子执行后才加载完成，导致全局TradingView对象尚未存在。
2. TypeScript类型未声明：TypeScript无法识别全局的TradingView对象，会触发编译报错。

解决步骤 #

1. 声明全局TypeScript类型 #

在项目src目录下新建或修改typings.d.ts文件，添加以下代码让TS识别TradingView全局对象：

declare global {
  interface Window {
    TradingView: any;
  }
}

export {};

2. 组件内动态加载脚本并初始化Widget #

修改组件代码，先确保脚本加载完成后再初始化Widget，同时添加组件销毁时的清理逻辑避免内存泄漏：

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-trading-view',
  templateUrl: './trading-view.component.html',
  styleUrls: ['./trading-view.component.css']
})
export class TradingViewComponent implements OnDestroy {
  private widgetInstance: any;

  ngAfterViewInit(): void {
    this.loadTradingViewScript().then(() => {
      this.initWidget();
    });
  }

  private loadTradingViewScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js';
      script.onload = () => resolve();
      script.onerror = () => reject(new Error('TradingView脚本加载失败'));
      document.body.appendChild(script);
    });
  }

  private initWidget(): void {
    this.widgetInstance = new window.TradingView.widget({
      "container_id": "tradingview_bac66",
      "colorTheme": "dark",
      "dateRange": "12M",
      "showChart": true,
      "locale": "en",
      "width": "100%",
      "height": "100%",
      "largeChartUrl": "",
      "isTransparent": false,
      "showSymbolLogo": true,
      "showFloatingTooltip": false,
      "plotLineColorGrowing": "rgba(41, 98, 255, 1)",
      "plotLineColorFalling": "rgba(41, 98, 255, 1)",
      "gridLineColor": "rgba(42, 46, 57, 0)",
      "scaleFontColor": "rgba(134, 137, 147, 1)",
      "belowLineFillColorGrowing": "rgba(41, 98, 255, 0.12)",
      "belowLineFillColorFalling": "rgba(41, 98, 255, 0.12)",
      "belowLineFillColorGrowingBottom": "rgba(41, 98, 255, 0)",
      "belowLineFillColorFallingBottom": "rgba(41, 98, 255, 0)",
      "symbolActiveColor": "rgba(41, 98, 255, 0.12)",
      "tabs": [
        {
          "title": "Indices",
          "symbols": [
            {
              "s": "NASDAQ:TSLA",
              "d": "Tesla Motors, Inc"
            },
            {
              "s": "NASDAQ:AMZN",
              "d": "Amazon.com Inc"
            },
            {
              "s": "NASDAQ:AAPL",
              "d": "Apple"
            }
          ],
          "originalTitle": "Indices"
        }
      ]
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时清理Widget
    if (this.widgetInstance && typeof this.widgetInstance.remove === 'function') {
      this.widgetInstance.remove();
    }
  }
}

3. 移除index.html中的重复脚本（可选） #

如果已经在组件内动态加载脚本，可以删除index.html中对应的<script>标签，避免重复加载资源。

Single Ticker Widget适配 #

若要加载Single Ticker Widget，只需修改loadTradingViewScript方法中的脚本地址为对应组件的脚本链接，同时调整initWidget内的配置参数即可。

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