How to import a module that extends another on the

Question

A simple road block. I need to use Leaflet and the Leaflet-Draw plugin in some of my services.

I don't know how to import the complete module (core and plugin)

// the core
import * as L from 'leaflet';
// extension
import 'leaflet-draw';

export class LeafletConsumerService {}

I have a solution that I don't like much. I load the libraries by hard-linking them in index.html and the consumer simply has a reference declaration to the typings files

/// <reference path="../typings/index.d.ts" />

export class LeafletConsumerService {}

Is there no other way I can do this? is there a way to import one file that should just cause a side-effect onto an already loaded module?

Answer 1

Ok, a quick and dirty solution. This answer works if you start your project from a quickstart repo. Goto system.config.extras.js and extend your configuration as such:

System.config({
    map: {
        'leaflet': 'npm:leaflet/dist/leaflet.js'
    },
    packages: {
        leaflet: {
            defaultExtension: 'js'
        },
    }
});

this means that we can now import leaflet as such

import * as L from 'leaflet';

and add our corresponding extension files as described

import 'your-leaflet-extension';

Remember to extend the type info for your extensions (through a typings file or make your own)