node_modules / bingmaps / types / MicrosoftMaps / Microsoft.Maps.d.ts 'не является модулем - PullRequest
Новая
       61

node_modules / bingmaps / types / MicrosoftMaps / Microsoft.Maps.d.ts 'не является модулем

0 голосов
/ 07 января 2019

Я использую официальный npm bingmaps с угловой 7 (cli).

Я добавил готовую конфигурацию, как указано в документации по npm
В настоящее время я загружаю базовую карту Bing.
В моем файле component.ts я добавил строку ниже, поскольку компилятор выдавал ошибку, если эта строка не использовалась («Microsoft» не определено) 

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

Теперь, когда я компилирую код, я получаю еще одну ошибку, поскольку Microsoft.Maps.All не является модулем.
Есть идеи по этому поводу? это проблема, связанная с угловым CLI? Я также сослался на ссылку ниже, но не понял, что они пытаются сказать.
git link

1 Ответ

0 голосов
/ 31 января 2019

Вы пытаетесь импортировать модуль, рассмотрите возможность импорта библиотеки: 

import 'bingmaps';

Другим вариантом, позволяющим обойти эту ошибку компиляции, было бы включение зависимости от пакета @types/bingmaps через файл tsconfig.json: 

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

Вот пример того, как использовать bingmaps пакет в приложении Angular2 +:

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 file 

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

где BingMapsAPILoader - сервис для загрузки библиотеки Bing Maps: 

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);
    });
  }
}

Вот демо для вашей справки

...