How to import / use typings into angular 2 component

1
votes

I am really trying to understand how to correctly import a dependency into a component.

I have installed the Leaflet library and its typings into the project (packages.json snippet):

    "@types/leaflet": "^1.0.38"
...
    "leaflet": "^1.0.2"

@types/leaflet/index.d.ts exports: 

declare module 'leaflet' {
    export = L;
}

In my component file, get complaints for all:

import leaflet from 'leaflet';
//import L from 'leaflet';

export class AppComponent {
  mymap = leaflet.map('mapid').setView([51.505, -0.09], 13);
}

Module ''leaflet'' has no default export.at line 3 col 8

What's the correct import statement? (I admit this is a big hole in my understanding of the angular cli / webpack / typescript / black hole)

2
angularnpmleafletangular-cli

2 Answers

1
votes

You can either import all of the exports like this:

import * as L from "leaflet";

let m = L.map(...);

Or you can import them individually like this:

import { map } from "leaflet";

let m = map(...);
1
votes

Leaflet doesn't seem to be compatible with ES2015 modules. Try this syntax:

import * as L from 'leaflet'

And use it like this:

let marker = L.marker(...)