Angular CLI组件调用外部JavaScript函数报错：_ChartingCommon未定义

嘿，我太懂这种踩坑的感觉了！在Angular里调用页面上的外部JS函数，经常会碰到这种全局变量找不到的报错，咱们一步步来解决：

1. 先确保外部JS在Angular组件之前加载 #

Angular是单页应用，组件加载速度很快，如果你的外部JS脚本加载时机晚于组件初始化，那自然会找不到_ChartingCommon。

正确的做法是把外部JS的<script>标签放在index.html里<app-root>的前面，保证组件启动前JS已经执行完毕：

<body>
  <!-- 先加载外部JS脚本 -->
  <script src="./assets/js/your-chart-script.js"></script>
  <!-- 再加载Angular根组件 -->
  <app-root></app-root>
</body>

如果你的脚本比较大，也可以给<script>加defer属性，这样会在DOM解析完成后再执行脚本，同时不阻塞页面渲染：

<script src="./assets/js/your-chart-script.js" defer></script>

2. 给TypeScript“打个招呼”：声明全局变量 #

Angular用TypeScript开发，它默认只认识模块内的变量，不知道全局作用域里的_ChartingCommon。所以咱们要在组件文件顶部声明这个全局变量，告诉TypeScript它的存在：

简单版（快速解决） #

// 在你的component.ts文件最顶部添加
declare var _ChartingCommon: any;

规范版（带类型提示） #

如果想让TypeScript有类型检查和提示，可以先定义一个接口，再声明变量：

// 定义_ChartingCommon的类型接口
interface ChartingCommon {
  initChart: (config: { chartId: string; data: any[] }) => void;
  updateChart: (data: any[]) => void;
  // 这里可以根据实际JS里的方法/属性补充
}

// 声明全局变量
declare var _ChartingCommon: ChartingCommon;

3. 确认外部JS确实把_ChartingCommon挂载到全局 #

有时候外部JS里的代码可能没有正确暴露全局变量，比如用了局部变量或者模块化写法。你要确保外部JS里是这样写的：

// 外部JS文件中，把对象挂载到window上，成为全局变量
window._ChartingCommon = {
  initChart: function(config) {
    // 你的图表初始化逻辑
  },
  updateChart: function(data) {
    // 更新图表的逻辑
  }
};

如果外部JS是ES模块（用了export），那你就别用全局变量的方式了，直接在Angular组件里导入：

import * as ChartingCommon from './assets/js/your-chart-script.js';

这种情况下还要注意，可能需要在angular.json的scripts数组里配置这个脚本，或者调整TypeScript的编译选项。

4. 在合适的生命周期钩子中调用函数 #

别在组件的constructor里直接调用外部JS函数！因为constructor执行时，页面DOM可能还没完全初始化，外部JS的逻辑也可能没准备好。

最好用ngAfterViewInit生命周期钩子，这时候视图已经加载完成，调用外部函数更稳妥：

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

declare var _ChartingCommon: any;

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 这里安全调用外部JS函数
    _ChartingCommon.initChart({
      chartId: 'myChart',
      data: [1, 2, 3, 4]
    });
  }
}

按照这几步走，基本上就能解决_ChartingCommon is not defined的报错啦！

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