使用angular-map包在Angular 6中整合Bingmap [英] Bingmap integration in Angular 6 using angular-map package
问题描述
我正在尝试使用"angular-map" npm软件包在angular 6中实现bingmap,因为我有请参考 问题陈述:未在node_modules中创建"bingmaps"文件夹
i am trying to implement bingmap in angular 6 using "angular-map" npm packages for that i have refer also referred problem statement: not created "bingmaps" folder in node_modules
app.module.ts
app.module.ts
/// <reference path="node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MapModule, MapAPILoader, BingMapAPILoaderConfig, BingMapAPILoader, WindowRef, DocumentRef, MapServiceFactory, BingMapServiceFactory } from "angular-maps";
import { AppComponent } from './app.component';
错误:
./node_modules/angular-maps/fesm5/angular-maps.js中的错误 找不到模块:错误:无法解析"D:\ bingmap \ bingmap \ node_modules \ angular-maps \ fesm5"中的"bingmaps" 我「wdm」:编译失败. src/app/app.module.ts(1,23)中的错误:错误TS6053:文件'D:/bingmap/bingmap/src/app/node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts ' 找不到.
ERROR in ./node_modules/angular-maps/fesm5/angular-maps.js Module not found: Error: Can't resolve 'bingmaps' in 'D:\bingmap\bingmap\node_modules\angular-maps\fesm5' i 「wdm」: Failed to compile. ERROR in src/app/app.module.ts(1,23): error TS6053: File 'D:/bingmap/bingmap/src/app/node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts' not found.
还安装了npm install --save @types/bingmaps
推荐答案
我刚刚在本地测试了&在stackblitz上,并意识到必须安装一些库依赖项才能使角度图起作用.我收到了与您相同的错误,但是一旦安装了库,该错误就消失了.
I just tested both locally & on stackblitz and realized that there are some library dependencies you have to install in order to make angular-maps work. I received the same error as you but once I installed the libraries the error was gone.
您的package.json应该包含以下库:
Your package.json should contain these libraries:
"@types/bingmaps": "0.0.1",
"angular-maps": "^6.0.1",
"async": "^2.5.0",
"bingmaps": "^2.0.3",
"core-js": "^2.5.4",
"font-awesome": "^4.6.3",
"json-loader": "^0.5.7",
所以您需要安装它们
npm install --save angular-maps
npm install --save bingmaps
npm install --save @types/bingmaps
npm install --save async@2.5.0
npm install --save json-loader
我将font-awesome作为外部链接包含在index.html中:
I included font-awesome as external link in index.html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
在app.module.ts上以及在app.component.ts上:
On app.module.ts include this as well as on app.component.ts:
import {
MapModule,
MapAPILoader,
MarkerTypeId,
IMapOptions,
IBox,
IMarkerIconInfo,
WindowRef,
DocumentRef,
MapServiceFactory,
BingMapAPILoaderConfig,
BingMapAPILoader,
GoogleMapAPILoader,
GoogleMapAPILoaderConfig
} from 'angular-maps';
如果您还通过 stackblitz 进行检查,则可以看到依赖项上使用了哪些额外的库
If you check also on stackblitz you can see on dependencies which extra libraries are used
这篇关于使用angular-map包在Angular 6中整合Bingmap的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!