Angular引入外部JS报DOM获取null、init未定义、querySelector错误

两个报错分别对应两个独立问题：

• 第一个空指针报错：push_nav.js加载完成后会立刻执行文件末尾写的init()自调用，这个时机远早于Angular完成HomeComponent的渲染，showMenu、perspective等属于组件模板的DOM还没挂载到页面，getElementById查询结果全部为null，调用querySelector自然触发空指针错误。
• 第二个函数未定义报错：Angular构建时会对脚本做作用域隔离，JS文件中直接声明的function init()不会默认挂载到全局window对象，TypeScript中直接声明的init函数找不到对应实现，触发引用错误。

按以下步骤修改即可：

1. 修改push_nav.js文件
   去掉文件末尾的自执行init()调用，将方法显式挂载到全局window对象，避免作用域隔离导致找不到函数：

function init() {
  var showMenu = document.getElementById( 'showMenu' ),
      perspectiveWrapper = document.getElementById( 'perspective' ),
      cont = perspectiveWrapper.querySelector( '.cont' ),
      contentWrapper = cont.querySelector( '.wrapper' );
  // 此处保留原init函数内的所有业务逻辑
}
// 删除原文件末尾的 init(); 自执行代码，新增下面这行挂载到全局
window.pushNavInit = init;

2. 修改HomeComponent的TypeScript代码
   调整全局方法声明方式，在组件视图完全渲染后再调用初始化方法，增加兜底逻辑避免偶发DOM未就绪问题：

import { Component, OnInit, ViewEncapsulation, AfterViewInit } from '@angular/core';
// 声明window上挂载的自定义方法
declare global {
  interface Window {
    pushNavInit: () => void;
  }
}
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class HomeComponent implements OnInit, AfterViewInit {
  constructor() { }
  ngOnInit(): void { }
  ngAfterViewInit(): void {
    // setTimeout将执行推到下一个事件循环，确保DOM完全渲染完成
    setTimeout(() => {
      window.pushNavInit?.();
    }, 0);
  }
}

3. 校验脚本引入
   你当前index.html中脚本放在<app-root>标签后的引入位置是正确的，无需调整，只需打开浏览器开发者工具Network面板，确认push_nav.js等脚本的加载状态为200，不存在404路径错误即可。

注意：如果模板中showMenu、perspective等元素受*ngIf条件控制显隐，ngAfterViewInit触发时若条件为false，元素依然不会存在，这种场景需要在条件变为true、元素完成渲染后再调用初始化方法，不能固定在ngAfterViewInit中调用。

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