Angular5+Node.js项目中OpenLayers的arc.js导入问题求助

嘿，我太懂你这种明明装了库却死活识别不了的闹心感了！把OpenLayers飞行动画示例搬到Angular 5项目里遇到这个arc.js导入坑，其实是因为这个库的模块规范和Angular默认支持的不太匹配，下面给你几个针对性的解决方案：

1. 改用require语法引入（最直接的临时方案） #

arc.js是早期的CommonJS规范库，Angular 5对这类非ES模块的import支持不太友好，你可以换成require来引入：

// 替换原来的import语句，改用require
const arc = require('arc');

如果TypeScript报错找不到require，就在项目的src/typings.d.ts文件里（没有就新建一个）添加全局声明：

declare var require: any;

2. 调整TypeScript配置，兼容CommonJS模块 #

打开项目根目录的tsconfig.json，在compilerOptions里添加以下配置，让TypeScript更好地处理非ES模块：

{
  "compilerOptions": {
    // 保留你已有的其他配置...
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true
  }
}

修改完后重启Angular开发服务器，让配置生效。

3. 全局引入arc.js（备选兜底方案） #

如果上面两种方法都没效果，试试把arc.js作为全局脚本引入：

• 找到node_modules/arc/arc.js文件，复制到项目的assets/js目录下（没有就新建这个路径）。
• 在src/index.html里添加脚本引入：

<script src="assets/js/arc.js"></script>

• 最后在你的组件文件顶部添加全局变量声明，让TypeScript不报错：

declare var arc: any;

之后就能在组件里正常使用arc对象了。

额外小提示 #

因为arc.js没有官方的TypeScript类型定义，使用时会缺失类型提示。如果需要类型支持，可以在typings.d.ts里简单声明常用方法的结构，比如：

declare interface ArcGreatCircle {
  raw(numPoints: number): number[][];
}
declare interface Arc {
  greatCircle(start: [number, number], end: [number, number], options?: any): ArcGreatCircle;
}
declare var arc: Arc;

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