Angular 5/Google Map - “ReferenceError: google is not defined" [英] Angular 5 / Google Map - "ReferenceError: google is not defined"

问题描述

我使用 Angular 5 的一种类型:@types/markerclustererplus":2.1.28".这种类型安装@types/google-maps.

I use Angular 5 with one type : "@types/markerclustererplus": "2.1.28". This type installs @types/google-maps.

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

I added script part in "index.html" file to load map. In my component, I can use google namespace. This works fine.

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

However, when I run tests... it fails! I got "ReferenceError: google is not defined"

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

I tried so many things... If you have any idea, I take it!

谢谢.

推荐答案

在您的测试中，您也可以使用模拟/存根在 window 对象上定义 google与您的组件正在与之交互的任何其他对象/函数一样:

In your test you can use a mock/stub to define google on the window object as well as any other objects/functions your component is interacting with:

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

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

You can then use using Jasmine Spies to intercept calls to a given object and/or function on the google such as maps to return custom values or anything else you'd need to test your component.

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

之所以使用括号表示法是为了取悦 TypeScript 编译器.使用点符号，您会看到诸如 Property 'google' 在类型 'Window' 上不存在 之类的错误.

The reason bracket notation is being used to please the TypeScript compiler. With dot notation you'd see an error such as Property 'google' does not exist on type 'Window'.

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

Hopefully that helps as least resolve the undefined error you are seeing.

谢谢！

这篇关于Angular 5/Google Map - “ReferenceError: google is not defined"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！