Angular项目调用原生JavaScript库的最佳实践及实现方法问询

我之前在开发Angular项目时也遇到过几乎一模一样的需求——要复用一个体积庞大的纯JS天文类库，完全重写根本不现实。下面是我亲测有效的步骤，一步步来就行：

1. 把JS类库放到项目里并配置引入 #

首先把你的原生JS文件（比如叫astronomy-utils.js）放到Angular项目的src/assets/js目录下（如果没有就新建这个路径），Angular的构建工具会自动识别并处理assets目录下的资源。

接下来有两种引入方式，按需选择：

全局引入（适合全项目多处使用） #

打开angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> scripts数组，把JS文件的相对路径加进去：

"scripts": [
  "src/assets/js/astronomy-utils.js"
]

保存后重启开发服务，整个项目就能访问到这个JS库的全局变量/函数了。

组件内按需引入（适合仅单个组件使用） #

如果只在某个组件里用到，没必要全局引入，可以在组件的初始化方法里用动态导入：

async ngOnInit() {
  // 动态加载JS文件，确保加载完成后再调用函数
  await import('../../assets/js/astronomy-utils.js');
  // 这里就可以调用库中的函数了
}

2. 解决TypeScript类型报错 #

因为Angular基于TypeScript，直接调用全局JS函数会提示“找不到名称”的错误，这时候需要添加类型声明：
在项目的src目录下新建一个typings.d.ts文件（如果已经存在就直接编辑），然后声明你要调用的函数或变量：

// 假设你的JS库有一个getStarData()函数和一个GALAXY_CONSTANTS全局变量
declare function getStarData(galaxyName: string): any;
declare const GALAXY_CONSTANTS: {
  TOTAL_STARS: number;
  MAJOR_GALAXIES: string[];
};

TypeScript现在就能识别这些全局成员，不会再报错了。

3. 在组件中调用JS函数/使用变量 #

现在就可以在你的Angular组件里直接使用了：

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

@Component({
  selector: 'app-astronomy-viewer',
  templateUrl: './astronomy-viewer.component.html',
  styleUrls: ['./astronomy-viewer.component.css']
})
export class AstronomyViewerComponent implements OnInit {
  milkyWayData: any;
  totalStars: number;

  ngOnInit(): void {
    // 调用JS库的函数
    this.milkyWayData = getStarData('Milky Way');
    // 使用JS库的全局变量
    this.totalStars = GALAXY_CONSTANTS.TOTAL_STARS;
  }
}

额外注意事项 #

• 如果你的JS库是用ES模块写的（包含export语句），那可以直接在组件里用import引入，不需要全局配置，比如：

  import { getStarData } from '../../assets/js/astronomy-utils.js';
  

• 如果JS库依赖其他JS文件，记得把依赖也一起放到assets目录并配置到scripts数组里，或者确保动态导入的顺序正确。

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