node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.d.ts' 不是模块

Question

我正在使用 bingmaps 的官方 npm 和 angular 7 (cli)。

我添加了 npm 文档中提到的配置
我目前正在加载基本 bing 地图。
在我的 component.ts 文件中，我添加了以下行，因为如果不使用此行，编译器会出错（'Microsoft' 未定义）

import { } from '../../../../../../node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All';

现在，当我编译代码时出现另一个错误，因为 Microsoft.Maps.All 不是模块。
对此有什么想法吗？这是与 angular CLI 相关的问题吗？我也在下面提到了 link，但没有得到他们想说的。
git link

Answer 1

您正在尝试导入模块，请考虑改为导入库：

import 'bingmaps';

克服此编译错误的另一种选择是通过 tsconfig.json 文件包含对 @types/bingmaps 包的依赖：

"compilerOptions": {
    //..
    "types": ["bingmaps"]
}

这是一个关于如何在 Angular2+ 应用程序中使用 bingmaps package 的示例：

map.component.ts 文件:

/// <reference types="@types/bingmaps" />

import { Component, OnInit } from "@angular/core";
import { BingMapsAPILoader } from "./BingMapsAPILoader";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html"
})
export class AppComponent  {

  constructor (loader: BingMapsAPILoader) {
    loader.load("bingAPIReady").then(() => this.initMap());
  }

  protected initMap() {
    const options: Microsoft.Maps.IMapLoadOptions = {
      center: new Microsoft.Maps.Location(47.60357, -122.32945),
      credentials:
        "--your Bing Maps API Key goes here--"
    };

    const map = new Microsoft.Maps.Map(document.getElementById("map"), options);
  }
}

map.component.html 文件

<div id="map" style="width: 600px; height: 400px;"></div>

其中 BingMapsAPILoader 是用于加载 Bing 地图库的服务：

import { Injectable } from "@angular/core";

@Injectable()
export class BingMapsAPILoader {

  private getNativeWindow(): any {
    return window;
  }
  private getNativeDocument(): any {
    return document;
  }

  public load(callbackName: string): Promise<void> {
    return new Promise<void>((resolve: Function, reject: Function) => {
      const script = this.getNativeDocument().createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.defer = true;
      script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=bingAPIReady';
      this.getNativeWindow()[callbackName] = () => {
        resolve();
      };
      script.onerror = (error: Event) => {
        reject(error);
      };
      this.getNativeDocument().body.appendChild(script);
    });
  }
}

Here is a demo供大家参考

node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.d.ts' 不是模块

node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.d.ts' is not a module

bing-maps

angular-cli

angular