求助：从angular-cli生成的Angular2应用的TypeScript中调用JS脚本失败

我之前也碰到过一模一样的问题，试了一堆网上的例子都不管用，后来慢慢摸清楚了几种靠谱的解决方式，你可以根据自己的场景选：

1. 引入全局JS脚本（适合第三方库或全局函数） #

如果你的JS脚本是全局挂载的（比如直接在window上暴露方法），按这两步来：

• 第一步：在angular.json的build -> options -> scripts数组里添加你的JS文件路径，比如：

  "scripts": [
    "src/assets/js/my-global-script.js"
  ]
  

  这样Angular会在打包时自动把这个脚本注入到index.html里。
• 第二步：在需要调用的TypeScript文件顶部声明全局变量，避免TS报错：

  declare const myGlobalFunction: (param: string) => void;
  

  之后就可以直接调用了：

  ngAfterViewInit() {
    // 建议在这个生命周期钩子调用，确保DOM已加载
    myGlobalFunction('Hello from TS!');
  }
  

2. 导入JS模块（推荐自己写的JS脚本用这种） #

如果你的JS脚本是模块化的（用export导出方法），可以直接导入到TS里：

• 先修改tsconfig.json，确保开启allowJs：

  "compilerOptions": {
    "allowJs": true,
    // 其他配置...
  }
  

• 然后在TS组件里直接导入：

  import { myModuleFunction } from '../assets/js/my-module.js';
  
  // 调用方法
  ngOnInit() {
    const result = myModuleFunction(10, 20);
    console.log(result);
  }
  

  要是你的JS没有用模块化写法，可以给它加个export，比如把原来的function myFunc() {}改成export function myFunc() {}。

3. 动态加载JS脚本（适合按需加载场景） #

如果不想一开始就加载脚本，想在需要的时候再加载，可以写个动态加载的工具函数：

loadExternalScript(url: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const scriptElement = document.createElement('script');
    scriptElement.src = url;
    scriptElement.type = 'text/javascript';
    scriptElement.onload = () => resolve();
    scriptElement.onerror = () => reject(new Error(`Failed to load script: ${url}`));
    document.body.appendChild(scriptElement);
  });
}

然后在需要的地方调用：

async loadAndUseScript() {
  try {
    await this.loadExternalScript('assets/js/dynamic-script.js');
    // 脚本加载完成后调用里面的方法
    (window as any).dynamicScriptMethod();
  } catch (error) {
    console.error(error);
  }
}

几个要注意的坑 #

• 路径一定要核对好！angular.json里的scripts路径是相对于项目根目录的，而动态加载的路径是相对于编译后的dist目录，放在assets文件夹下的话路径一般不会错。
• 如果是第三方库，先看看有没有对应的@types包，比如jQuery可以装npm install @types/jquery，这样就不用手动declare全局变量了。
• 别在constructor里直接调用JS方法，这时候DOM可能还没准备好，优先用ngAfterViewInit或者ngOnInit（根据脚本依赖情况选）。

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