Angular 5 / Google Map - “ReferenceError: google is not defined”

Question

我使用一种类型的 Angular 5：“@types/markerclustererplus”：“2.1.28”。这种类型安装@types/google-maps。

我在“index.html”文件中添加了脚本部分来加载地图。在我的组件中，我可以使用 google 命名空间。这工作正常。

但是，当我运行测试时......它失败了！我收到“ReferenceError: google is not defined”

我尝试了很多东西......如果你有任何想法，我接受！

谢谢你。

Answer 1

在您的测试，你可以使用一个模拟/存根定义google上的window对象以及任何其它物品/功能您的组件与互动：

window['google'] = {
  maps: {
    Maps: () => {}
  }
};

然后，您可以使用 Jasmine Spies拦截对给定对象和/或函数的调用，google例如maps返回自定义值或测试组件所需的任何其他内容。

const spy = spyOn(window['google']['maps'], 'Maps').and.returnValue({});

之所以使用括号表示法是为了取悦 TypeScript 编译器。使用点符号，您会看到诸如Property 'google' does not exist on type 'Window'.

希望这至少有助于解决您看到的未定义错误。

谢谢！