Jakob Svenningsson Jakob Svenningsson - 1 year ago 1896
TypeScript Question

Angular 2 - import of external leaflet typescript library

Im trying to import the a typescript leaflet library into my angular 2 application.

This is my map component. Ive installed leaflet.d.ts with tsd install and my application does not complain about

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>
but when i try to use a L.map which is a exported module in leaflet.d.ts i get the error "ReferenceError: L is not defined". This is the first time i try to import a external typescript library in angular 2 and clearly im doing something wrong.

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>
import { Component } from 'angular2/core';
selector: 'map',
template: `
<div id="map"></div>
export class Map{
var map = new L.Map('map', {
zoomControl: false


"dependencies": {
"angular2": "^2.0.0-beta.3",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"normalize.css": "^3.0.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.6",
"typings": "^0.6.4",
"zone.js": "^0.5.11"
"devDependencies": {
"concurrently": "^1.0.0",
"gh-pages": "^0.11.0",
"grunt": "~0.4.5",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-sass": "~0.9.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-shell": "^1.2.1",
"lite-server": "^2.0.1",
"normalize.css": "^3.0.3",
"typescript": "^1.7.5"
"scripts": {
"publish": "node publish.js",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "


"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"leaflet/leaflet.d.ts": {
"commit": "1da639a106527e0c4010b354a1efe52a3059a291"

Could anyone tell me what I am doing wrong?


Answer Source

You need to include the leaflet JS file:

  map: {
    leaflet: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'
  packages: {'app': {defaultExtension: 'ts'}} 
        .then(null, console.error.bind(console));

Then you can import it in your modules this way:

import {Component, OnInit} from 'angular2/core';
import leaflet from 'leaflet';

See this plunkr: http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download