如何在Angular 6 CLI应用程序中包含Leaflet.TextPath或Leaflet.PolylineDecorator？

Question

I have been trying to include https://github.com/makinacorpus/Leaflet.TextPath in Angular 6 CLI application but with no success. Can anyone please guide me? Thanks in advance.

EDIT: Or if this one? https://github.com/bbecquet/Leaflet.PolylineDecorator , it also has types.

Answer 1

To be able to include Leaflet.TextPath you need to install Leaflet & Leaflet.TextPath in your angular-cli project and then import them as follows:

in angular.json add:

"styles": [
     "node_modules/leaflet/dist/leaflet.css",
     "src/styles.css"
],
"scripts": [
   "node_modules/leaflet/dist/leaflet.js"
]

in component.ts add:

 ...
 import 'leaflet';
 import 'leaflet-textpath';

 declare let L; // to be able to use L namespace
 ...

Then you initialize your code inside ngOnInit and you place the code as indicated in the library:

ngOnInit() {
   your code initialization here

    ...
}

Demo