Angular 15：angular.json脚本加载异常及DOM初始化问题排查

问题根源 #

你在angular.json中全局导入的图表初始化脚本（比如columns_timeline.js），会在页面DOMContentLoaded事件触发时执行，但此时<app-chart>组件的DOM节点（比如id="columns_timeline"的元素）还未完成渲染，所以初始化逻辑找不到目标节点。setTimeout是靠延迟碰运气，无法适配组件渲染的异步时机，导致首次加载失败。

解决方案 #

利用Angular的组件生命周期钩子，确保在组件DOM完全渲染后再执行图表初始化逻辑，具体步骤如下：

1. 移除全局脚本导入 #

从angular.json的scripts数组中移除所有图表初始化相关的脚本（保留echarts.min.js等依赖库即可）：

"scripts": [
    "./src/assets/global_assets/js/main/jquery.min.js",
    "./src/assets/global_assets/js/main/bootstrap.bundle.min.js",
    "./src/assets/global_assets/js/plugins/visualization/echarts/echarts.min.js",
    // 保留其他必要依赖，删除columns_timeline.js等图表初始化脚本
]

2. 在组件中触发初始化 #

在ChartComponent中使用ngAfterViewInit钩子（该钩子触发时，组件的DOM已完全生成），执行图表初始化：

方式一：动态加载脚本

如果不想修改原有JS文件，可在组件中动态加载脚本并在加载完成后初始化：

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

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const script = document.createElement('script');
    script.src = './assets/global_assets/js/demo_charts/echarts/light/bars/columns_timeline.js';
    script.onload = () => {
      // 调用全局初始化方法
      window['EchartsColumnsTimelineLight']?.init();
    };
    document.body.appendChild(script);
  }
}

方式二：整合脚本逻辑到组件

修改columns_timeline.js，将初始化逻辑封装为可导出的函数：

// columns_timeline.js
export function initColumnsTimelineChart() {
  // 原EchartsColumnsTimelineLight.init()中的所有代码
  // 示例：
  const chartDom = document.getElementById('columns_timeline');
  const myChart = echarts.init(chartDom);
  // ... 配置项和渲染逻辑
}

然后在组件中导入并调用：

import { Component, AfterViewInit } from '@angular/core';
import { initColumnsTimelineChart } from '../../assets/global_assets/js/demo_charts/echarts/light/bars/columns_timeline';

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

原理说明 #

ngAfterViewInit是Angular组件生命周期的关键钩子，确保组件及其子组件的视图都已渲染完成，此时访问组件内的DOM节点是安全的。这种方式完全适配Angular的异步渲染机制，比全局事件或固定延迟更可靠。

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