Angular 将BeautifyMarker插件添加到ngx传单项目

我目前无法将BeautifyMarker插件与ngx传单集成在一起

我一直跟着那条路走，一点运气都没有

我使用了

npm安装

来抓取BeautifMarker，Font Awesome，并且已经安装了引导程序。手册也已根据

ngx手册

官方教程正确添加和配置

我编辑了我的

angular cli.json

文件以包含BeautyMarker.css和.js文件，如下所示：

"styles": [
    "styles.css",
    "../node_modules/leaflet/dist/leaflet.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/beautifymarker/leaflet-beautify-marker-icon.css"
],
"scripts": [
    "../node_modules/leaflet/dist/leaflet.js",
    "../node_modules/beautifymarker/leaflet-beautify-marker-icon.js",
], ...

我还完全导入了包，因为它扩展了

L

，如下所示：

import * as L from 'leaflet';
import 'beautifymarker';

那不起作用，所以我也试着：

import * as L from 'leaflet';
import '../../node_modules/beautifymarker/leaflet-beautify-marker-icon.js';

还尝试完全忽略导入，一个名为

heatmap.js

的插件。所有这些都不允许我访问

L.BeautifyIcon

---

有什么建议吗？

我花了一些时间调查你的问题

我所做的是：

已安装传单、@asymmetrik/ngx传单和@types/传单

已安装引导程序、字体真棒、BeautifMarker并将其添加到angular.json

重新启动服务器，因为监视程序仅适用于src文件夹，并且对于渲染字体的更改不遵守angular-cli.json

angular.json

"styles": [
   "node_modules/leaflet/dist/leaflet.css",
   "node_modules/bootstrap/dist/css/bootstrap.css",
   "node_modules/font-awesome/css/font-awesome.css",
   "node_modules/beautifymarker/leaflet-beautify-marker-icon.css",
   "src/styles.css"
],
"scripts": [
    "node_modules/leaflet/dist/leaflet.js",
    "node_modules/beautifymarker/leaflet-beautify-marker-icon.js"
]

app.module.ts

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
..
imports: [
   ..,
   LeafletModule.forRoot()
],

app.component.ts

// import * as L from 'leaflet';
// import 'beautifymarker';

// instead of the above try
import 'leaflet';
import 'beautifymarker';
declare let L;

options = {
    layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18, attribution: '...' }
        )
    ],
    zoom: 12,
    center: L.latLng(46.879966, -121.726909)
};

beautifyOptions = {
    icon: 'plane',
    borderColor: '#8D208B',
    textColor: '#8D208B',
    backgroundColor: 'transparent'
};

layers = [
    L.marker([ 46.879966, -121.726909 ], {
        icon: L.BeautifyIcon.icon(this.beautifyOptions)
    })
];

模板

<div style="height: 500px;"
    leaflet 
    [leafletOptions]="options"
    [leafletLayers]="layers">
</div>

---

在步骤3中重新启动服务器是什么意思？我按照您列出的顺序重新安装了所有软件包，但仍然出现错误<代码>TS2339:类型“typeof”上不存在属性“BeautifyIcon”“./node_modules/@types/传单/index我的意思是通过在mac上按ctl+c或cmd+c从命令行停止服务器，然后再次运行ng serve。我在本地运行所有程序，但无法创建stackblitz，因为ngx-传单不起作用。我那样做了，但还是没有运气。我想知道我的其他插件是否引起了问题。你知道如何在

@typeof

中包含

BeautifMarker

吗？我在尝试时没有遇到任何错误。我将尝试将项目推送到github，以便您能够看到它并让您知道，因为使用stackblitz无法构建它。它和ngx传单不太合拍。哦，我没注意到那个变化！我尝试了新的进口风格，它似乎是工作。非常感谢你！