CODEWITHSUNDEEP
angularwebpackleaflet
Ahmed Abdelrahman
Ahmed Abdelrahman

Reputation: 821

Angular 2 - import of external leaflet typescript definition

I've the same question like this one: Angular 2 - import of external leaflet typescript library

But since Angular 2 is using Webpack now, How to include 'leaflet' using angular-cli and webpack configuration.

Upvotes: 1

Views: 913

Answers (1)

Ahmed Abdelrahman
Ahmed Abdelrahman

Reputation: 821

I found the answer myself:

1- In package.json make sure you've added @types/geojson, @types/leaflet, and leaflet packages:

"dependencies": {
......
"@types/geojson": "0.0.31",
"@types/leaflet": "^1.0.40",
"leaflet": "^1.0.2",
.......
}

or simply add them by: npm install @types/geojson @types/leaflet leaflet --save

2- In angular-cli.jsonfile spot "styles" and add leaflet.css to it:

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

3- Make sure that tsconfig.json in your angular-cli project have a reference to the @types folder:

"typeRoots": [
  "../node_modules/@types"
]

4- Now, leaflet is available in the angular-cli project and you can use it by referencing the L namespace:

map: L.Map;
mapOptions: L.MapOptions;

Upvotes: 2

Related Questions