如何在Angular中引入本地JS文件

1. 将 JS 文件放置在合适的位置

为了确保项目结构清晰且易于管理，建议将 JS 文件放置在 src/assets/scripts 目录下。例如：

src/
├── assets/
│   └── scripts/
│       └── bubble-chart.js

假设你有一个名为 BubbleChart 的 Javascript 函数。

2. 配置 angular.json 文件

打开 angular.json 文件，在 projects/your-project-name/architect/build/options/scripts 节点中添加 JS 文件的路径。例如：

"scripts": [
  "src/assets/scripts/bubble-chart.js"
]

请注意，确保路径正确无误，避免因路径错误导致文件无法加载。

3. 重新启动 Angular 项目

为了使配置生效，需要重新启动 Angular 项目。你可以使用以下命令来重启项目：

npm start

4. 在 TypeScript 文件中引用 JS 函数

根据函数的类型，有两种引用方法：

4.1 引用不带参数的函数

在需要使用该函数的 TypeScript 文件中，使用 declare function 声明函数。例如：

declare function BubbleChart(): any;

4.2 引用带参数的函数

同样在需要使用该函数的 TypeScript 文件中，使用 declare var 声明变量。例如：

declare var BubbleChart: any;

通过以上步骤，你可以在 Angular 项目中成功引入并使用本地的 Javascript 文件。