Angular 4中导入并使用外部JS模块的方法求助

我来帮你搞定这个问题，你之前的思路方向是对的，但可能有些细节没处理到位，咱们一步步来解决：

方法一：全局变量方式（适合不想修改JS文件的场景） #

这是你之前尝试过的方向，调整一下配置就能生效：

1. 配置Angular CLI引入JS文件
   打开.angular-cli.json（Angular 4用的是这个文件名，不是后来的angular.json），找到scripts数组，添加你的JS文件的相对路径。比如你的JS文件放在src/assets/js/myJs.js，那配置应该是：

   "scripts": [
     "src/assets/js/myJs.js"
   ]
   

   配置完记得重启ng serve，不然配置不会生效。

2. 添加类型声明
   在src/typings.d.ts文件里添加全局变量的声明：

   declare var myModule: {
     myFunction: () => void;
   };
   

   如果你不想写具体的类型定义，用declare var myModule: any;也可以，不过明确类型能获得更好的开发提示。

3. 在组件中使用
   现在不需要import，直接在组件类里调用即可：

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent implements OnInit {
     ngOnInit() {
       // 直接调用JS模块里的方法
       myModule.myFunction();
     }
   }
   

方法二：模块导入方式（更符合ES模块规范） #

如果你想用import语法导入JS模块，需要做以下调整：

1. 修改TS配置允许导入JS文件
   打开tsconfig.json，找到compilerOptions，添加"allowJs": true：

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

2. 直接导入JS文件
   在组件里用相对路径导入你的JS模块，注意路径要和组件文件的位置对应：

   import { Component, OnInit } from '@angular/core';
   import * as jsModule from '../assets/js/myJs.js'; // 替换成你的实际路径
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent implements OnInit {
     ngOnInit() {
       // 通过导入的模块对象调用方法
       jsModule.myModule.myFunction();
     }
   }
   

   这种方式不需要在.angular-cli.json的scripts里添加路径，webpack会自动处理导入。

常见问题排查 #

• 确认JS文件路径是否正确，不管是scripts里的路径还是import的相对路径，写错了都会导致找不到文件。
• 修改配置后一定要重启ng serve，Angular CLI不会自动检测配置文件的修改。
• 如果用全局变量方式，确保typings.d.ts在src目录下，Angular会自动识别这个文件里的类型声明。

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