Angular 6应用导入Presto.js时layout函数调用错误求助

看起来你遇到的问题是Angular模块系统和Presto.js的全局导出方式不匹配导致的，我给你几个可行的解决思路：

思路1：用全局变量声明（最直接的方案） #

既然你已经在angular.json的scripts数组里引入了Presto.js，它其实已经成为全局可用的变量了，不需要再用import语句导入。你可以这样修改组件代码：

// example.component.ts
declare var Presto: any; // 声明全局变量，让TypeScript能识别它

@Component({...})
export class ExampleComponent implements OnInit {
  ngOnInit() {
    debugger;
    Presto.layout(); // 直接调用全局变量的方法
  }
}

原因很简单：通过angular.json引入的脚本会被打包到全局作用域，Presto对象会挂载在window上，声明后就能直接使用。

思路2：调整导入方式（适配非ES模块脚本） #

如果更倾向于用import语法，由于Presto.js可能不是标准的ES模块（没有用export导出内容），你需要做以下调整：

1. 修改导入语句，加上.js后缀（Webpack需要明确的文件扩展名才能正确解析）：

import * as Presto from '../../assets/presto/Presto.js';

2. 如果TypeScript报错找不到模块，你可以创建一个类型声明文件（比如src/assets/presto/presto.d.ts），内容如下：

declare module '../../assets/presto/Presto.js' {
  export function layout(): void;
  // 可以根据Presto的其他方法补充对应的类型声明
}

这样TypeScript就会明确知道这个模块导出了layout函数。

思路3：检查脚本路径和Presto.js的导出逻辑 #

• 确认angular.json里的脚本路径是否正确：可以尝试把路径改成"src/assets/presto/Presto.js"（去掉开头的./），避免路径解析出现异常。
• 打开Presto.js文件查看导出方式：如果它是通过window.Presto = {...}挂载到全局的，那思路1是最适配的；如果它有module.exports = Presto这类CommonJS导出，那思路2的调整就能生效。

额外注意事项 #

• 如果你用的是Angular 14及以上版本，建议在tsconfig.json里设置"allowSyntheticDefaultImports": true，方便导入非ES模块。
• 修改angular.json后记得重启Angular开发服务器（ng serve），确保配置修改生效，有时候配置更新需要重启才能加载新的脚本。

内容的提问来源于stack exchange，提问作者I'm nidhin